Rolagem com Tween (suave)

Aug 31

Olá! Olha eu de novo, postando mais um utilitário que muita gente procura.
Pra quem tá iniciando em animação em Flash, não tenha dúvidas, depois do preloader com certeza o item mais procurado é a Rolagem, ou também conhecido como Scroll.

Eu mesmo já procurei muita rolagem na internet, algumas complicadíssimas, algumas simples porém de aparência ruim e quando aprendi a programar em actionscript a primeira coisa que fiz foi a minha própria rolagem, e o mais legal, já fiz pensando em distribuir.

Você precisa fazer o download do Flash Player para visualizar este conteúdo.

Eu não queria uma rolagem comum, então fiz uma como essa acima, Gira o Wheel do mouse e arrasta, note a suavidade, é uma destas que eu vou ensinar a fazer hoje.

Update: Caixa de texto dinâmica + clique no tracker.

Clique no tracker

//movendo o tracker da rolagem ao clicar por sobre o fundo da barra
ftracker.onPress = function() {
var my:Number = ftracker._ymouse;
if(my &gt;= ftracker._height-tracker.stracker._height) {
my = ftracker._height-tracker.stracker._height;
}
drag = true;
goDrag();
TweenLite.to(tracker.stracker, 0.5, {_y:my, ease:Strong.easeOut});
}

Caixa de texto dinâmica

//Usando tamanho de caixa dinâmico
//lendo xml
//usando acentos
System.useCodepage = true;
//criando objeto xml
var texto:XML = new XML();
//carregando o texto
texto.load("/blog/wp-content/uploads/release.html");
//ignorando espaços em branco
texto.ignoreWhite = true;
//definindo funções ao carregar o xml
texto.onLoad = function(ok) {
if (ok) {
//recebendo em html os nós do documento xml (html 1.0 tags)
container_mc.caixa01.htmlText = texto;
var infos = function () {
//informando a posição final para rolagem, definida pelo tamanho da caixa de texto
yfinal = yinicial-container_mc._height+altura_barra+tracker.stracker._height
};
infos();
}
};

Características da Rolagem

Altura dinâmica (basta alterar a variável “altura”)
Velocidade do Wheel dinâmico (basta alterar a variável “speed”)
Delay da suavidade dinâmico (altere a variável “delay” [padrão=0.8])
Tamanho da barra de scroll definido pelo usuário (variável “tracker.stracker._height = 100;”)

Pré-Requisitos

Classe TweenLite (http://blog.greensock.com)
Conhecimento em matemática
Conhecimento básico em AS2

Parte 1 – O Flash

- Crie um filme com os seguintes itens, devidamente instanciados:
duas barras verticais, de qualquer tamanho e largura, com instancias: “stracker” e “ftracker“, a stracker deve estar em cima da ftracker, transforme o conjunto em um movieclip de nome “tracker”. Ambos alinhados em _x:0 e _y:0.

- Crie uma caixa de texto, preencha com o texto e transforme em um movieclip chamado “container_mc“, uma camada acima, crie uma máscara e instancie como “mask_scroll“, os tamanhos não importam, e sim o alinhamento, sempre em _y:0 e _x:0, pois os tamanhos são definidos pelas variáveis. Transforme esse conjunto todo num movieClip de nome e instância “rolagem“, as ações serão colocadas dentro deste movieclip rolagem, e não na raíz, dessa forma ele pode ser inserido em qualquer outro filme sem necessidade de maiores configurações e alterações além dos tamanhos.

Abaixo uma visualização do interior do movieclip “rolagem”, para vocês terem idéia da construção visual.

[Visual da rolagem com tween]

Parte 2 – O Action Script

/*================================================
/	Rolagem com Tween
/
/	por Eder Lima (http://www.ederlima.com.br/)
/
/	FlashPédia (use como quiser)
/*==============================================*/
 
//importando a classe TweenLite
import gs.TweenLite;
import gs.easing.Strong;
 
//VARIÁVEIS AJUSTÁVEIS (VOCÊ PODE ALTERAR CONFORME QUEIRA)
//altura da rolagem (absoluto)
var altura:Number = 300;
//velocidade da rolagem usando o wheel do mouse
var speed:Number = 5;
//delay de tempo para suavizar
var delay:Number = 0.8;
//tamanho do tracker (barra de scroll)
tracker.stracker._height = 100;
 
//variáveis fixas
//essas variáveis não devem ser alteradas, pois elas tornam
//a rolagem o mais dinâmica possível
 
//define a altura da barra
var altura_barra:Number = altura-tracker.stracker._height;
//define a posição inicial
var yinicial:Number = container_mc._y;
//define a posição final (posição onde a rolagem é arrastada
//ao máximo e continue visível
var yfinal:Number = yinicial-container_mc._height+altura_barra+tracker.stracker._height;
//define a altura da máscara
var altura_mascara:Number = altura_barra+tracker.stracker._height;
//passa a altura da máscara para a máscara
mask_scroll._height = altura_mascara;
//define a altura da barra de fundo da rolagem
ftracker._height = altura_barra+tracker.stracker._height;
 
//eventos
//ao pressionar o mouse sobre a barra de scroll (tracker.stracker)
tracker.stracker.onPress = function() {
	//inicia função goDrag()
	goDrag();
	//inicia arraste limitando seu movimento a altura definida pelo
	//usuário na variável altura
	this.startDrag(false,0,0,0,altura_barra);
};
 
//função godrag (a mágica)
function goDrag() {
	//adiciona o evento onEnterFrame para o tracker
	//poderia ser onMouseMove, mas então o código precisaria aumentar
	//para rolar usando o wheel do mouse
	tracker.stracker.onEnterFrame = function() {
			//infotracker é uma variável que recebe a posição do stracker
			//em forma de percentagem, dessa forma conseguimos utilizar
			//esta posição para mover o conteúdo da rolagem
			infotracker = (this._y/(altura_barra/100));
			//a função abaixo serve para controlar a posição do tracker
			//quando usado o wheel do mouse, para que ele não ultrapasse
			//os limites da barra em _y
			//se infotracker for menor que 0
			if (infotracker&lt;0) {
				//recebe 0
				infotracker = 0;
				//informa a posição ao tracker.stracker em _y(barra de scroll)
				tracker.stracker._y = 0*(altura_barra/100);
				//se maior
			} else if (infotracker&gt;100) {
				//recebe 100
				infotracker = 100;
				//passa a informação para o tracker.stracker em _y (barra de scroll)
				tracker.stracker._y = 100*(altura_barra/100);
			}
			//aqui informamos a posição a ser alcançada pelo conteúdo da rolagem
			//essa posição é uma posição em _y, recebida através de matemática
			//pegamos o infotracker que é a posição em percentual da barra de scroll
			//e transformamos esse percentual em posição numérica em _y considerando
			//a posição inicial e final do conteúdo da rolagem, logo:
			//posição final é igual a resultante do percentual percorrido da barra de scroll
			// * (vezes) a posição final dividido por 100
			posfinal = Math.floor(((infotracker*yfinal)/100));
			//aqui usamos a classe TweenLite para mandar a conteúdo mover até esta posição
			TweenLite.to(container_mc,delay,{_y:posfinal, ease:Strong.easeOut});
 
		};
}
 
//função para apagar o evento EnterFrame
function delDrag() {
	//pára o arraste
	tracker.stracker.stopDrag();
	//apaga o evento onEnterFrame da barra de scroll
	delete tracker.stracker.onEnterFrame;
}
 
//chmando a função que pára a rolagem ao soltar o mouse
//da barra de scroll
tracker.stracker.onRelease = function() {
	delDrag();
};
//chmando a função que pára a rolagem ao soltar o mouse
//da barra de scroll fora da barra
tracker.stracker.onReleaseOutside = function() {
	delDrag();
};
 
//criando o ouvinte para o mouse
var scroller:Object = new Object();
//o ouvinte, ao rolar o mouse
scroller.onMouseWheel = function(delta) {
	//informa que a barra de scroll deve mover-se em _y
	//para o fator delta (evento de retorno do mouswheel)
	// * (vezes) a velocidade definida pelo usuário(speed) (negativo)
	//porque vamos descer a barra de scroll a medida que o fator aumenta
	tracker.stracker._y += delta*-speed;
	//executa a função de arraste
	goDrag();
};
//adiciona o ouvinte ao mouse
Mouse.addListener(scroller);

Finalizando

Ao inserir essa rolagem em qualquer filme, basta fazer os ajustes de largura, e colocar os valores nas variáveis inicias do começo do filme.

O ouvinte para o scroll do mouse é um caso separado, se a rolagem for inserida via MovieClipLoader ou loadMovie é necessário remover esse ouvinte do conteúdo da rolagem e colocá-lo no filme principal, pois do contrário ao carregar e descarregar filme serão criados múltiplos ouvintes, acelerando a rolagem.

O uso da TweenLite deixa a rolagem muito leve para ser usada dentro de outros filmes que já consumam um pouco de processamento do computador.

O texto pode ser substituído por qualquer outro conteúdo, incluindo dinâmico(com um pouco de trabalho).

Bom, é isso, espero que essa rolagem sirva de base para quem como eu precisa deste tipo de conteúdo.

LINK PARA DOWNLOAD
http://www.ederlima.com.br/arquivos/flash/rolagem_tween.rar

UPDATE – TEXTO DINÂMICO COM AUTOSIZE E CLIQUE NO TRACKER
Clique para fazer o download

Colaboração do Márcio Ferreira

Para quem quiser utilizar htmltext no flash, segue um componente que o Márcio sugeriu e que é bem interessante, em as2.
Clique para baixar
Com esse componente é possível criar conteúdo html com bastante facilidade, já que isso no as2 é um pouco chato.
Obrigado pela colaboração Márcio! (y)

Versão horizontal (algumas diferenças)

O Victor comentou sobre como fazer essa rolagem na horizontal.
Basicamente é o mesmo funcionando, porém tudo que for _height será substituído por _width, e o que for _y será substiuído por _x.
Link para exemplo: Rolagem horizontal
Link para download: Clique para baixar (.rar)

Enjoy!

58 Comentários para “Rolagem com Tween (suave)”

Rafael Lima Disse:
August 31st, 2008 às 5:11 pm
Very Nice, great Job!
Marcos Paulo Furlan Disse:
September 2nd, 2008 às 12:56 pm
Parabéns pelo post.

[]’s
marcos_paiva Disse:
September 11th, 2008 às 1:35 pm
Muito legal, bem explicado…..!
Márcio Ferreira Disse:
October 17th, 2008 às 8:19 am
Bom dia Éder.

Baixei os fontes…abri no CS3 e no Flash 8 e não funciona de maneira nenhuma. Tem algum componente para ser instalado antes de roda??

Um abraço.
Eder Lima Disse:
October 17th, 2008 às 11:08 am
Olá Márcio.
Sim, você precisa fazer o download da Classe TweenLite AS2, ela é que é responsável pela leveza do movimento em Tween.
http://blog.greensock.com/tweenliteas2
Entre e faça o download, coloque a classe no classpath do flash ou descompacte a pasta gs para o mesmo local onde está o fla.
Depois disso a classe funciona perfeitamente.

Abraço!
Cristiano Cáceres Disse:
October 23rd, 2008 às 11:21 am
Fala Eder muito obrigado, vc esta de parabens cara!

Eder tenho uma duvida, consegui aumentar o tamanho da barra de rolangem, mais não consegui aumentar a espessura(weight)da caixa de texto. você sabe me dizer como faço para aumentar ela, almentar a fonte do texto sem desfocar as letras?
Eder Lima Disse:
October 23rd, 2008 às 12:42 pm
Eu que agradeço!
Para aumentar a largura da barra de rolagem, tem que mover manualmente mesmo. Em um update próximo eu devo configurar a largura também de forma dinâmica, através de variáveis.

Quanto a fonte, precisa editar o texto clicando sobre a caixa e selecionando a fonte.

O segredo é usar embeded fonts e a opção “bitmap text, no antialias”, é a melhor forma da fonte não serrilhar.

Você não precisa se prender ao texto, pode trocar o texto por qualquer movieclip.
Cristiano Cáceres Disse:
October 23rd, 2008 às 12:45 pm
Obrigado Eder! então não precisa deixar e usar a chamada do xml, poderia fazer um movieclip simples de texto?

até mais
Eder Lima Disse:
October 23rd, 2008 às 12:49 pm
Exatamente.
Se você tirar a caixa de texto dinâmica, pode colocar outro movieclip, só fique atento pra não deletar o container_mc, delete a caixa, mas ele é obrigatório.
Cristiano Cáceres Disse:
October 23rd, 2008 às 1:01 pm
Obrigado Eder!
Bruno Disse:
October 23rd, 2008 às 6:31 pm
Eder, muito bom esse seu tutorial, mas estou com um problema,
eu tentei usar esse scroll com o attach movie,só q ele não efetua a rolagem, vc podia ajudar?
vlw
PS.: estou com a pasta gs no mesmo diretório do SWF
Eder Lima Disse:
October 23rd, 2008 às 6:41 pm
Olá Bruno.
Pra utilizar a rolagem, com conteúdo dinâmico, siga o exemplo da segunda caixa de código lá em cima, onde mostra a leitura do XML.

Repare nesta linha
yfinal = yinicial -container_mc._height + altura_barra + tracker.stracker._height;

Sempre que você for usar um conteúdo dinâmico, deve informar a posição final da rolagem, através dessa fórmula logo após completar a função que inclui esse conteúdo.

Então, se você criou um movieclip através de attachMovie, a linha deve ser colocada logo em seguida, pois somente depois do attach é possível determinar a altura do movieclip ‘container_mc’, então:

function myFunction() {
rolagem.container_mc.attachMovie(”mymovie”, “mymovie”, 1);
rolagem.yfinal = rolagem.yinicial-rolagem.container_mc._height + rolagem.altura_barra + rolagem.tracker.stracker._height;
//repare que agora estou apontando as variáveis dentro da rolagem
}
Pronto, com isso a rolagem considera a nova posição final.
Bruno Disse:
October 24th, 2008 às 1:15 pm
vlw eder!
Patricia Lopes Disse:
October 28th, 2008 às 6:40 pm
Olá Eder.. eu amei seu topico.. ficou lindo…
mas eu baixei o tutorial pra estudar e ver com calma e as barras naum funcionam….

afff..
Bjussssssssssss
Rodolfo Paranhos Disse:
November 2nd, 2008 às 1:36 am
Eder, apos ter procurado bastante definitivamente achei um tutorial a respeito de scroll com drag que me serviu, na minha opniao o melhor; mas no entanto nao consegui edita-lo quanto ao texto, se eu soubesse editar o xml seria bastante facil, por outro lado tentei substitui-lo no prorio .fla e nao consegui… poderia me ajudar na troca do texto? Li sobre o que vc explicou nos posts acima e nao consegui fazer o correto.
Parabens pelo trabalho!
Obrigado.
Breno Novelli Disse:
November 2nd, 2008 às 4:09 pm
Valeu Éder. Post show, vou tentar aplicar agora.

Patricia, vou me antecipar ao Éder, você baixou as classes? Estão linkadas no começo do tópico.

Abraços Éder

Vou continuar vendo o site.
Rodolfo Paranhos Disse:
November 3rd, 2008 às 1:05 am
Eder consegui, alterei o xml e deu tudo certo.
Valeu cara!
Mais uma vez ta de parabens pelo trabalho.
Rodolfo
Eder Lima Disse:
November 3rd, 2008 às 8:50 am
Mais uma vez:
Obrigado a todos.
Em breve novos utilitários incluindo as3.
[]’s
Cristiano Cáceres Disse:
November 3rd, 2008 às 5:02 pm
Eder gostaria de tirar uma duvida com vc meu amigo.
teria possibilidade de colocar imagens dentro deste arquivo html “release” para ler junto com o texto que esta sendo chamado pelo xml.

teria?
Márcio Ferreira Disse:
December 4th, 2008 às 9:13 am
Grande Éder!

Caro amigo estou fazendo um texto de rolagem tipo perfil de artista, para mudar formatação da fonte dos itens.
Ex.:

Cor preferida (negrito): Verde.(itálico)
Prato predileto (negrito): Lazanha.(itálico)
Time do coração (negrito): Cruzeiro. (itálico)

como fazer para carregar o texto com rolagem apartir de um arquivo com estas duas variaveis?

Grande abraço.

Valeu pela força.
Eder Lima Disse:
December 4th, 2008 às 4:25 pm
Nossa, esqueci de responder o cristiano.
Sim cristiano, é possível.

Márcio, é possível sim, você pode usar o exemplo da rolagem que lê um texto html, nele você pode formatar o texto usando html 1.0, ex: Márcio Ferreira Disse:
December 6th, 2008 às 10:01 am
Éder, estou tentando utilizar as tags HTML 1.0 e realmente não funciona.

Eder Lima Disse:
December 6th, 2008 às 7:33 pm

Márcio, olha só.
Trabalhar com htmlText no as2 realmente é chato.
Estive meio sem tempo, terminando trabalhos, mas neste fim de ano começo a trabalhar com mais prioridade o as3, e trabalhar com htmlText nele é simples e 100% funcional.
Em breve vou postar esse mesmo exemplo em as3, daí já faço implementando isso e você pode conferir a diferença.
Abraço!
Em breve tem nova versão da mp3lite com novas funções.
[]’s

Márcio Ferreira Disse:
December 10th, 2008 às 7:47 am

Ok Éder.
Valeu pela força.

De qualquer forma gostaria de disponibilizar para todos um componente que eu achei hoje e que de repente pode ajudar aos outros usuários do blog nesta questão HTML / AS2.
O componente é muito bom e totalmente free!!

http://www.marduf.com.br/componente-HTML-AS2.zip

Victor Disse:
December 18th, 2008 às 11:37 pm

E pra fazer com que o texto role horizontalmente, como faço?

Obrigado.

Fred Disse:
December 21st, 2008 às 2:23 pm

Eder seu trabalho impressiona e inspira a galera! Essa barra eh mto util … porém não consigo duplicá-la! Para colocar mais rolagens pelo site com textos diferente, entende?
Como faço?
Muito obrigado e um abraço!

Eder Lima Disse:
December 21st, 2008 às 5:47 pm

Obrigado pelo apoio Fred.
Fred, não esqueça que a Rolagem é um MovieClip, e que todos os itens dela são símbolos, então se você copia a rolagem apenas, ela funciona, mas se alterar o texto, vai alterar nas duas.

Afinal, você alterou o MovieClip e um dos seus símbolos, com isso todos as instâncias deste mesmo movieclip serão alteradas.

A única forma de reproveitar é usando a Rolagem com texto dinâmico.
Você copiaria duas rolagens, por exemplo, e instanciaria como:
- rolagem1
- rolagem2
Então, a caixa de texto ficaria dinamicamente reaproveitável, usando xml você poderia ler documentos ou partes diferentes de um xml e receber e cada instância da rolagem separadamente, ex:

texto 1 > rolagem1.container_mc.texto
texto 2 > rolagem2.container_mc.texto

Então você precisaria modificar um pouco a rolagem e médio conhecimento para poder ler o xml externamente ao código da rolagem.

Wagner M araujo Disse:
January 23rd, 2009 às 8:56 am

Eder… muito bom seu trabalho, vejo sempre você na comunidade flash e tava procurando sobre tweenlite
acabei entrando no seu blog espero um dia chegar aos conhecimentos de voces

ALINE RAPOSO Disse:
February 8th, 2009 às 9:55 pm

MUITO BOM.. PORÉM NÃO ESTOU CONSEGUINDO BAIXAR O TWEEN LITE. É PAGO? PQ SE TIVER ALGUM GRATUITO, NÃO ESTU CONSEGUINDO ACHAR. PODERIAM EM AJUDAr?

Eder Lima Disse:
February 9th, 2009 às 3:25 am

Oi Aline, obrigado pelo comentário.
Não, a TweenLite é gratuita e pode ser baixada no seguinte link http://blog.greensock.com/tweenliteas2.

É só esperar carregar a licença de uso, aceitar e fazer o download.

Para usar você pode configurá-la no classpath do flash ou colocá-la na pasta onde está o fla com a rolagem.

Valter Disse:
February 11th, 2009 às 6:15 pm

Olá…

Muito bom isso Eder =D
mas estou com um pequeno problema…
A rolagem pelo mouse não está funcionando (wheel) no FireFox

Estou importando o swf que contem a rolagem para dentro de outro swf, onde fica a estrutura do site, layout…

No IE a rolagem funciona perfeitamente, mas no firefox funciona apenas se clicar no botãozinho da rolagem e arrastá-lo.

Eder Lima Disse:
February 11th, 2009 às 7:08 pm

Valter, obrigado pelo comentário.
Olha só, o wheel só funciona quando o mouse está sobre a área da rolagem.
Repara no próprio exemplo, a rolagem é carregada externamente, você ativa a interação com o flash quando clica no botão carregar. Por isso a rolagem responde imediatamente a ordem do mouse.

Valter Disse:
February 12th, 2009 às 12:43 pm

Ahh já descobri o problema…
aqui eu to usando o wmode=”transparent” pois tenho imagem de fundo na página…

Mas isso está bloqueando a rolagem no fire fox…
quando tiro este parametro ela funciona, mas fica feio pois exibe o fundo branco do swf, cobrindo a imagem de fundo da página =/

Eder Lima Disse:
February 15th, 2009 às 5:35 pm

Hum.
Realmente, o wmode está apresentando muitos problemas no firefox.
Um problema conhecido do wmode no firefox é acentuação em campos de texto.
Se você ativar ele não funciona, realmente é difícil entender o porquê disso, mas acontece.

Valter Disse:
February 16th, 2009 às 11:44 am

É… também reparei esse problema dos acentos….

Mas já resolvi o problema da rolagem, coloquei a imagem de fundo dentro do próprio flash, asism não preciso usar o wmode=transparent =D

Agora ficou perfeito \o/

vlwww aeeew Eder =]

Eloisa Disse:
March 31st, 2009 às 7:09 pm

Olá Eder, por muito tempo procurei por um scroll como esse, parabéns.
Só que tive um problema, eu tentei utilizar para texto dinâmico, mas externo e o texto não carregou. Você tem alguma sugestão em que poderia ser? Utilizei LoadVars para carregar
Obrigada

Igor Disse:
April 20th, 2009 às 12:12 pm

Éder,

Primeiramente parabéns pelo belo post, muito útil. Cara, estava tentando importar externamente um xml(consegui), porém ao tentar atachar o styleSheet o mesmo não reconhece os códigos do CSS, saberia porque?
Fico no aguardo e mais uma vez parabéns.

Abs.

Eder Lima Disse:
April 20th, 2009 às 11:58 pm

Igor, não cheguei a testar essa rolagem com css.
Verifica se a caixa de texto tá com html = true.
Outra coisa, tem um erro na leitura do XML, que eu refiz corretamente no post com o Player de Destaques. Isso pode alterar. Dá uma olhada no código do Player, onde leio o html usando CDATA, pode ajudar a resolver.
Vou testar e procurar um solução e assim que pronto, eu atualizo aqui.
Valeu!

Igor Disse:
April 22nd, 2009 às 12:39 pm

Grande Eder,

Eu estou conseguindo ler o XML da forma convencional(sem a necessidade da leitura dos nós), porém ao tentar aplicar o CSS o texto não aparece, se eu tirar o CSS o texto aparece corretamente. Pergunto isso pois gostaria de ter estilos tipo título, texto, link, etc.
Abs e fico no aguardo.

ROdrigo Priolo Disse:
April 23rd, 2009 às 9:34 pm

Cara… eu percebi q só rolava para baixo quando usava o wheel.. acrecentei um código e funfo na boa

scroller.onMouseWheel = function(delta) {
if(delta == -3){
tracker.stracker._y += delta*-speed;
}
else{
tracker.stracker._y -= delta*+speed;
}
//executa a função de arraste
goDrag();
};

abraços

Rafael Disse:
May 21st, 2009 às 10:33 am

Olá fiz o tutorial e não funcionou.
teria como enviar por e-mail por favor
webmaster@abratu.com.br

Mario Augusto Disse:
May 25th, 2009 às 4:25 pm

Ola, gostei de mais da barra de rolagem, parabens! Eu gostaria de saber se tem como colocar dois botoes um para subir e um para descer… tem jeito ? grato

Eder Lima Disse:
May 26th, 2009 às 9:33 pm

O tutorial funciona, inclusive com código fonte.
Não, não posso te enviar por e-mail. Enviaria o mesmo arquivo e não funcionaria da mesma forma.

Leia totalmente o post, vai notar que a rolagem pede uma Classe chamada “TweenLite”, você não a tem instalada, esse, com certeza, é o motivo do seu “não funcionar”.

Mario Augusto Disse:
May 27th, 2009 às 3:16 pm

Eder pode me ajudar naquele probleminha?

”
Ola, gostei de mais da barra de rolagem, parabens! Eu gostaria de saber se tem como colocar dois botoes um para subir e um para descer… tem jeito ? grato
”

Grato

Renato Disse:
June 17th, 2009 às 9:16 pm

Esse tutorial está ótimo!
valeu Eder…

Jackson Ueda Disse:
July 15th, 2009 às 5:18 pm

Nossa cara, pelo tuto
Me ajudo mto =]]
Vlw

Thiago Torres Disse:
July 15th, 2009 às 6:58 pm

Éder,

Parabéns pelo blog, encontrei ele por acaso e gostei bastante.

Estou montando um site com AS3 e precisava de inserir uma barra de rolagem em algumas páginas, eis que achei esta sua, que por sinal é muito boa (usa até o wheel), mas estou de deparando com alguns probleminhas, será que pode me dar uma luz aqui ?

É o seguinte, utilizo AS3 no arquivo principal e com o Loader eu chamo os arquivos com esta barra de rolagem, sem nenhum problema ele aparece normalmente, mas quando chamo outra página que também possui uma barra de rolagem, ao retornar para a página anterior, a barra de rolagem para de funcionar, não consigo arrastar a rolagem…Sabe me dizer se isto é algum problema de referência perdida ?

Obrigado

Lucas Godinho Disse:
August 16th, 2009 às 3:06 pm

Muito bom MESMO!!!
Meu muito obrigado pelos arquivos, vieram em boa hora.

Márcio Disse:
October 5th, 2009 às 9:09 am

Bom dia Eder,

Estou com um problema…eu preciso fazer 3 barra de rolagem no mesmo filme…pois quando eu altero o texto de uma barra, o outro altera também..como posso mudar o conteúdo de cada barra de rolagem sem que as outras alterem também?

Obrigado

Eder Lima Disse:
October 25th, 2009 às 1:45 pm

Olá Márcio.

Desculpe pela demora para responder.
Para você utilizar a mesma rolagem com 3 textos diferentes você precisa criar 3 instâncias da mesma rolagem:
- Arraste da biblioteca 3 rolagens
- Uma vez posicionadas, troque as instâncias para “rolagem1″ “rolagem2″ “rolagem3″.
- Insira os textos dinamicamente, usando action script, em cada rolagem, ex:
-> rolagem1.container_mc.caixa01 = “seu texto da caixa 1″;
-> rolagem2.container_mc.caixa01 = “seu texto da caixa 2″;
-> rolagem3.container_mc.caixa01 = “seu texto da caixa 3″;

Dessa forma você conseguirá utilizar o mesmo movieclip para as 3 rolagens.
Se você tentar alterar diretamente na rolagem, estará alterando o símbolo, que é único e consequentemente estará sobrepondo as atualizações.

Espero ter ajudado, abraço.

Sérgio Disse:
November 5th, 2009 às 4:07 pm

Olá,
Baixei o arquivo, baixei a classe tweenlite cs2 e descompactei a pasta no local do FLA e rodei do FLASH CS3, mas não funciona. O que estou errando???

thiago Disse:
November 20th, 2009 às 12:37 pm

Opa. tentei seguir o tutorial, e me apareceu o seguinte erro:

Unexpected ‘lt’ encountered
if (infotracker<0) {

‘else’ encountered without matching ‘if’
} else if (infotracker>100) {

Tentei baixar o .FLA, mas ele nao funciona..
Já baixei o tweenlite e descompactei a pasta “com” na pasta do meu site e nada..

Eder Lima Disse:
November 20th, 2009 às 5:11 pm

Esse erro é porque o plugin que mostra o código em actionscript transformou “>” (maior) em “& gt;” e “” (maior) e “& lt;” por “<" (menor).

Quanto a TweenLite, não basta simplesmente descompactar na pasta "com" do site. Quando essa dica foi feita a tweenlite ainda era apenas um pacote "gs", então bastava inserir a pasta que contivesse a pasta "gs" no ClassPath do Flash.

Com a atualização do pacote, na versão 11, é necessário não apenas configurar corretamente o ClassPath (menu, edit, preferecences, actionscript, actionscript3), como também mudar a linha dos imports, onde está "import gs.TweenLite" você substitui por "import com.greensock.TweenLite".

O mesmo procedimento para todos os imports da classe.

Essa resposta vale para a pergunta do Thiago e do Sérgio.

Wagner Disse:
January 19th, 2010 às 8:05 am

Ola Eder

A barra de relogem até um certo ponto não mostra mais o texto que segue abaixo onde eu altero para poder rolar em um texto mais longo.

Abraço

Wagner Disse:
January 19th, 2010 às 8:14 am

Eder na verdade é na caixa de texto percebi quando coloco um cixa de texto muito lonca corta resolvi criando outra caixa de texto abaixo… uma gabisinha
mas vou estudar pra ver por que isso ta acotecendo

Valew

Giuliano Disse:
February 2nd, 2010 às 11:48 pm

Caro Eder, parabéns pelo tópico!!
Estou precisando de um scroll horizontal e não sei pq, este que estou baixando aqui não está funfando….

Gostaria de lhe pedir uma ajuda encarecida….estou precisando de um horizontal para finalizar um trabalho e tenho um código aqui de um outro scroll vertical.

Poderia me ajudar a torna-lo horizontal? Te agradeço d+!!!

Segue o código.

fscommand(“allowscale”, “false”);
bar.useHandCursor = dragger.useHandCursor=false;
space = 0;
friction = 0.3;
speed = 4;
y = dragger._y;
top = main._y;
bottom = main._y+mask_mc._height-main._height-space;
dragger.onPress = function() {
drag = true;
this.startDrag(false, this._x, this._parent.y, this._x, this._parent.y+this._parent.bar._height-this._height);
dragger.scrollEase();
};
dragger.onMouseUp = function() {
this.stopDrag();
drag = false;
};
bar.onPress = function() {
drag = true;
if (this._parent._ymouse>this._y+this._height-this._parent.dragger._height) {
this._parent.dragger._y = this._parent._ymouse;
this._parent.dragger._y = this._y+this._height-this._parent.dragger._height;
} else {
this._parent.dragger._y = this._parent._ymouse;
}
dragger.scrollEase();
};
bar.onMouseUp = function() {
drag = false;
};
moveDragger = function (d) {
if ((dragger._y>=y+bar._height-dragger._height && d == 1) || (dragger._y<=y && d == -1)) {
clearInterval(myInterval);
} else {
dragger._y += d;
dragger.scrollEase();
updateAfterEvent();
}
};
up_btn.onPress = function() {
myInterval = setInterval(moveDragger, 18, -1);
};
down_btn.onPress = function() {
myInterval = setInterval(moveDragger, 18, 1);
};
up_btn.onMouseUp = down_btn.onMouseUp=function () {
clearInterval(myInterval);
};
MovieClip.prototype.scrollEase = function() {
this.onEnterFrame = function() {
if (Math.abs(dy) == 0 && drag == false) {
delete this.onEnterFrame;
}
r = (this._y-y)/(bar._height-this._height);
dy = Math.round((((top-(top-bottom)*r)-main._y)/speed)*friction);
main._y += dy;
};
};

Grande abraço.

Fabio Disse:
March 15th, 2010 às 4:41 pm

Baixei os exemplos e testei sem alterar nada, mas não funcionou.

Stenio Disse:
July 26th, 2010 às 4:42 pm

Fala eder, bem interessante o tutorial. Tentei converter isso pra as3, mas não ficou tão legal. Não to conseguind deixar dinamico.
Kra, faz esse tutorial em AS3, por favor.
Abração

Deixe um comentário

Comentários recentes

Pedro Ivo Jovelli: Obrigado pela ajuda com o tutorial !!! Abs!...
Eder Lima: Olá Uriel. Cara, estranho, eu consigo entrar diretamente. V...
Uriel: Eder, porque quando tento acessar o endereço diretamente: h...
Stenio: Fala eder, bem interessante o tutorial. Tentei converter iss...
Rafael Iron: Desconsidera. burrice minha.. Ja consegui.. Valeu, pode apag...