/Desenvolvimento

voltar
/Desenvolvimento

Scroll vertical e horizontal

Maxwell Dayvson Da Silva em Flash

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.

Maxwell Dayvson Da Silva em Flash

Comentários

Dê Sua Opinião

O seu endereço de email não será publicado Campos obrigatórios são marcados *

  1. 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?

  2. 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

  3. 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…

  4. 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

  5. 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.

  6. 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

  7. 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.

  8. 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.

  9. 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

  10. 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 .

  11. 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.

  12. 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?

    1. 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

  13. 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.

  14. 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.

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

    Flw

  16. 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

leia mais
Este projeto é mantido e patrocinado pelas empresas:
Hospedado por: