Seções iMasters
Flash

Scroll vertical e horizontal

Olá
pessoas! Esse artigo foi escrito atendendo a vários e-mails
que recebi sobre a matéria anterior com a classe de Scroll.
Recebi muitos pedidos para demostrar como poderia ser feito o
scroll horizontal na classe, então fiz algumas modificações
na mesma afim de obter o resultado.

Agora a classe MDScroll, faz scroll vertical e
horizontal.

LEMBRANDO QUE ESSE ARTIGO
FOI FEITO COM O USO DO FLASH MX 2004

Antes
de começar a programar, baixe aqui a classe atualizada

Para
quem não viu a matéria anterior, segue o link

ESTOU DISPONIBILIZANDO AQUI O CONTEÚDO DA
MATÉRIA ANTERIOR E NO FINAL DA MESMA, TEMOS A ATUALIZAÇÃO
EXEMPLIFICANDO COMO USAR O SCROLL NA HORIZONTAL

O primeiro passo que devemos fazer é criar
um MovieClip que será nosso scroll.

Em seguida, crie um MovieClip que será usado
como fundo do scroll, e o movieclip do drag, parte do scroll que
será arrastada.

Observe a imagem abaixo para visualizar a estrutura
que o MovieClip deve ter. Os instance names são obrigatórios,
pois a classe está utilizando os mesmos.

Nosso scroll deve ficar como mostra a imagem abaixo.
Atribua um instance name de rMovie

O próximo passo é criar o MovieClip
que terá o conteúdo do scroll, conteúdo esse
que será movimentado. Atribua um instance name para ele
de foto_mc.

Em seguida, crie um MovieClip com um quadrado que
será a área visível do conteúdo (ou
seja, o que estiver além disso, não será
exibido). Atribua um instance name para ele de mask

Ambos deverão estar com o seu registration
no canto superior esquerdo.

Coloque esses dois MovieClips em layers diferentes
e clique sobre o botão direito no layer. Clique em Mask.

Chegamos à imagem abaixo. Agora nós
temos o Scroll, Conteúdo e a Máscara.

Crie um layer para colocar as actions. E vamos
programar!

/*Instancie um objeto da
Classe MDScroll, passando como argumentos, o instance name do
MovieClip do scroll(rMovie) em seguida o MovieClip do conteudo(foto_mc)
e por fim o MovieClip da mascara(mask) */

var scrollMc = new MDScroll(rMovie,foto_mc,mask);
//Execute o método init da classe
MDScroll para inicializar o scroll

scrollMc.init();

Pronto. O scroll para MovieClips já está
funcionando. Simples né?! risos…

Para fazer o scroll de TextField, faça uma
cópia do MovieClip do Scroll e atribua um instance name
de rTxt.

Em seguida, crie um TextField Dinâmico, com
a quantidade de texto que você precisa. Clique com o botão
direito do mouse sobre o TextField e marque a opção
Scrollable.

E por fim, atribua um instance name para ele de
c_txt, como mostro na imagem abaixo.

Para o nosso exemplo, eu coloquei o texto dinâmico
já dentro do Flash, mas você pode perfeitamente colocar
para que o texto venha de algum arquivo externo.

Agora vá nos frames das actions, e vamos
programar, para o scroll de textfield funcionar.

Pronto. Os objetos já estão posicionados
e cada um com seu devido instance name. Vamos programar novamente!

/*Instancie um objeto da
Classe MDScroll, passando como argumentos, o instance name do
MovieClip do scroll(rTxt) em seguida o TextField do conteudo(c_txt)
*/

var scrollTxt = new MDScroll(rTxt,c_txt);
//Execute o método init da classe
MDScroll para inicializar o scroll, passe como argumento do método
o valor true para informar a classe que o scroll é de TextField
e não de MovieClip

scrollTxt.init(true);

O CONTEÚDO A SEGUIR SE REFERE À ATUALIZAÇÃO
DA MATÉRIA, EXEMPLIFICANDO O USO DO SCROLL HORIZONTAL.

Observe a imagem abaixo: Duplique o movieclip de
scroll e em seguida abra o painel Transform. Rotacione o movieclip
em -90º e atribua um instance name para esse movieclip de
rMovie2.

Agora vamos ao código:

/*Instancie um objeto da
Classe MDScroll, passando como argumentos, o instance name do
MovieClip do scroll(rMovie2) em seguida o MovieClip
do conteudo (foto_mc) e por fim o MovieClip da
mascara(mask) */

var scrollhMc = new MDScroll(rMovie2,foto_mc,mask);
//O próximo passo é executar
o método horizontal,passando o valor true como argumento,
Esse método foi implementado na nova versão da classe
MDScroll.

scrollhMc.horizontal(true);
//Execute o método init da classe
MDScroll para inicializar o scroll

scrollhMc.init();

O scroll horizontal para movieclips está
pronto. Vamos agora para o scroll de textfield horizontal. Vamos
a ele:

Observe na imagem abaixo que o campo de texto com
o instance name de "c2_txt" (sem aspas) está
com Line Type na opção Single Line.
Duplique o movieclip de scroll horizontal, e apenas altere seu
instace name para rTxt2.

Agora vamos ao código:

/*Instancie um objeto da
Classe MDScroll, passando como argumentos, o instance name do
MovieClip do scroll (rTxt2) em seguida o TextField
do conteudo (c_txt2) */

var scrollhTxt = new MDScroll (rTxt2,c2_txt);
//O próximo passo é executar
o método horizontal,passando o valor true como argumento,
Esse método foi implementado na nova versão da classe
MDScroll.

scrollhTxt.horizontal(true);
//Execute o método init da classe
MDScroll para inicializar o scroll

scrollhTxt.init();

Baixe
aqui todos os arquivos usados nesse artigo.

Abraços a todos. Espero que tenham aproveitado.

Comente também

29 Comentários

Francis Pires de Carvalho

Quando carrego o filme não acontece nada, quando clico em cima da barra de rolagem ela pula pra esquerda(no vertical) e pra cima(horizontal) e não rola o clip foto_mc.
O que pode estar acontecendo?

Renato Lins

tudo bem,

gostaria de saber como chamar uma pagina . php dentro de um quadro flash…

estou criando um site onde a fita superior do site é feito em flash e nessa fita consta 5 botões e cada um deles chamara uma pagina diferente…por exemplo o botão “CONTATO” precisa chamar a página “contato.php”

fico muito grato se alguem puder me ajudar

Sérgio Novelli

Bom dia Mawell.
Primeiramente, parabéns pelas matérias postadas aqui, estão muito boas e bem explicadas. Mas eu vou precisar de uma ajuda sua: estou fazendo em flash MX um pequeno filme onde manchetes de notícias ficarão rolando de baixo para cima. No evento rollOver, as manchetes param de rodar e no rollOut elas voltam a passar. O problema é que para elas voltarem a rodar, precisei fazer com que no rollOut, o filme pule para um determinado quadro. Eu queria que no lugar disso, ela continuasse a rodar do quadro onde parou. Ou seja, se ao parar o mouse sobre a manchete a mesma parar no quadro 28, por exemplo, ao retirar o mouse ela continuaria do quadro 28 em diante, sem precisar voltar para o 25, vamos supor. Espero que tenha sido claro. Aguardo por resposta e gostaria que você montasse um artigo para colocar aqui e ensinar os demais também.
Valeu, meu amigo, e obrigado pela ajuda. Fui…

Sérgio Novelli

Maxwel, se quiser dar uma olhada no noticiario que fiz, acesse http://www.winnerinfo.com.br/homeescola.htm
Minha dúvida esta explicada no comentário anterior, por favor, envie-me um e-mail respondendo o mesmo.
Obrigado e t+.

Marcos Lima

dsafsdfsa

Marcos Lima

Sou fã de carteirinha do site “imasters”, sigo todas as dicas documentado e não documentado. Agora gostaria muito de saber como é que faço para mudar o .ico do .exe do flash.
Agradeceria muito se respondesse com brevidade!!!
Marcos Lima

Paulo Vinicius Senna Figueiredo

Prezado, minha página em flash é muito pesada e quero carregala, mais não sei qual o código e como fazer isso em flash pode me auxiliar.

danielly

olá….primeiramente gostaria de parabenizar pelo ótimo trabalho, pois é através deles q conquistamos mais conhecimento dia a dia…gostaria de saber onde posso coseguir facilmente o download do flash MX se fosse possivel o mais rapidamente…grata pela atenção desde ja agradeço…
abraço
Jo

Renato Silva

Bom dia, gostaria de parabenizar pelo site e suas matérias. Tenho a seguinte dúvida, tenho uma logomarca em CDR e quero usá-la na minha animação em flash, como devo proceder para incrementá-la em minha animação? Obrigado.

Odair Seixas

Olá Maxwell, em primeiro lugar parabéns pela coluna, sua didática é muito boa.
Bom, eu gostaria de saber se você conhece alguma forma de bloquear a ação de descompiladores, pois existem arquivos comerciais e outros não.
Grato.

Fabio

Olá, primeiramente parabéns pelos seus artigos! estou com um problema muito sério e preciso de ajuda, estou trabalhando em um website onde estou usando o sistema <PARAM NAME=”wmode” VALUE=”transparent”> e tambem o sistema <body bgcolor=”transparent” ALLOWTRANSPARENCY=”true”> para deixar filmes em flash transparentes e tambem fundos de htm transparentes, mas este sistema só funciona o ie, no netscape não funciona, vc tem alguma dica para acertar este problema? agradeço desde já! Fabio

Alex Regis Nóbrega

Olé como eu faço para colocar um video de 30 segundo de apresentação e logo apos seu fim ele chama a index do site …porfavor me ajude .

Leandro Santos Nares Pereira

Maxwell, eu sou leigo em flash mas tenho muita vontade de aprender e o que eu tenho notadocem suas materias e que ela são muito voltadas para as pessoas que já trabalhão na área e possue algum conhecimento. E tanto que os comentários que tem em sua coluna é de pessoas que já usam a ferramenta e precisam resolver algum problema…então gostaria que vc nos incluise em suas aulas e fizesse alguns feijoes com arroz para que possamos aprender a ferramenta aos poucos…tenha avista as colunas do Fábio loyde e do Alex falcão eles mostraram com algum exemplos como funciona as ferramentas e depois fizeram truques mas dificeis. Se vc fizer isso pela galera eu ficarei muito agradecido por poder aprender a usar essa poderosa ferramenta de animacão…um abraço Leandro.

Wander Yuzo Kayumi

Amigo, numa boa o exemplo é muito bom ao que parece. Mas antes de escrever um tutorial pense em ser mais claro, isso aqui ta uma confusão só. Creio que o objetivo aqui é explicar. Ou estou errado?

Átila

Coluna fantásitca! Velho, meus parabéns. A classe é perfeita, o código é muito claro e objetivo. Aprendi e me ajudou muito!!

Alexander dos Santos Martins

Por que quando eu baixo o arquivo usado na materia e coloco pra rodar ele não funciona ?

Edna Maria

É possível fazer com que o scroll do mouse funcione??

    Adriano Moura

    na verdade estou respondendo unicamente para a galera que Vai no Google buscando essa solução e não acha (espero que o Google indexe isso rsrs)

    é necessário alterar a classe mdScroll, cole isso no final

    private function cima():Void {
    _scroll.drag_mc._y = Math.max(0, _scroll.drag_mc._y – 2);
    _scroll.drag_mc.movePosition();
    }
    private function baixo():Void {
    _scroll.drag_mc._y = Math.min(_scroll.fundo_mc._height – _scroll.drag_mc._height, _scroll.drag_mc._y + 2);
    _scroll.drag_mc.movePosition();
    }

    e depois no AS que vai no filme flash troque por esse para MC

    /*Instancie um objeto da Classe MDScroll, passando como argumentos, o instance name do
    MovieClip do scroll(rMovie) em seguida o MovieClip do conteudo(foto_mc) e por fim o MovieClip da mascara(mask) */
    var scrollMc = new MDScroll(rMovie,conteudo_mc,mask);
    // aqui criamos o objeto responsavel por reconhecer o movimento do scroll do mouse
    var mouseListener:Object = new Object();
    mouseListener.onMouseWheel = function(delta) {
    // delta 3 é um valor padrão desta função, 3 = scroll pra cima, -3 = scroll pra baixo
    if (delta == 3) {
    scrollMc.cima(); // executa uma função dentro da clase scrollMc
    }
    if (delta == -3) {
    scrollMc.baixo(); // executa uma função dentro da clase scrollMc
    }
    };
    Mouse.addListener(mouseListener);
    //Execute o método init da classe MDScroll para inicializar o scroll
    scrollMc.init();
    stop();

    e por esse para Texto Dinâmico

    /*Instancie um objeto da Classe MDScroll, passando como argumentos, o instance name do
    MovieClip do scroll(rTxt) em seguida o TextField do conteudo(c_txt) */
    var scrollTxt = new MDScroll(rTxt,c_txt);
    //Execute o método init da classe MDScroll para inicializar o scroll, passe como argumento do método o valor true para informar a classe que o scroll é de TextField e não de MovieClip

    var mouseListener:Object = new Object();
    mouseListener.onMouseWheel = function(delta) {
    // delta 3 é um valor padrão desta função, 3 = scroll pra cima, -3 = scroll pra baixo
    if (delta == 3) {
    scrollTxt.cima(); // executa uma função dentro da clase scrollMc
    }
    if (delta == -3) {
    scrollTxt.baixo(); // executa uma função dentro da clase scrollMc
    }
    };
    Mouse.addListener(mouseListener);
    //Execute o método init da classe MDScroll para inicializar o scroll
    scrollTxt.init(true);
    stop();

    espero ajudar a galera que tiver procurando, pq eu mesmo estou procurando isso a semanas e só agora que consegui resolver o código

    Valeu

Sergio Silverio

naum funciona o arquivo….
e eu foi tentar encontrar o erro e me perdi mais ainda!!
uq pode ser??

Fundação Mokiti Okada – M.O.A.

Muito Obrigada!!! Me ajudou muito para inclementar uma galeria q estou fazendo.
O pessoal não pode esquecer de baixar a classe junto senão não funciona, além de configurar o flash p/ acessar a classe.

Dennin Dalke Onório

Como Eiko comentou no assunto, acredito q configurei corretamento o flash, mas pra tirar duvidas seria bom vc escrever essas partes mais especificamente, anexa-las junto ao seu tutorial.

Dennin Dalke Onório

alem disso vc podeira disponibilizar o .fla dessa materia para download

Rodrigo Silva Kamenach

ae e como eu faria pra ele funciona com um texto externo de um txt? Tetei de varias maneiras e não consegui

Am_ Me_

amigo, seus txts sao mt bons. esse, por acaso, indica link pra download mas nao funciona. vc tirou do ar? obrigada

Am_ Me_

amigo, seus txts sao mt bons. esse, por acaso, indica link pra download mas nao funciona. vc tirou do ar? obrigada

Leonardo Cardoso

Olá meu amigo, baixei os arquivos que você disponibilizou para download mais não esta funcionando…

Isaque Souza Barbosa

Pessoal, quem abriu os arquivos pra download e não funfou, tenta trocar o nome da classe de ‘mdscroll.as’ para ‘MDScroll.as’

Flw

Essa barra de rolagem só deve funcionar para você. Valeu a tentativa…

Gostei desse tutorial, o que vc nos mostra na pagina funciona o scroll horizontal para imagem, mas quando baixei e tentei rodar na minha maquina a barra de scroll horizontal moveo movieclip para cima e para baixo e nao como acontece ai na pagina do tutorial,

se por gentileza puder me da um retorno ficarei grato!

Atenciosamente David Mota

Qual a sua opinião?