PESQUISA: 

 

Fórum de Flash
Fórum de discussão sobre Flash moderados por especialistas.

tutoriais
Os melhores tutoriais de Flash escritos em Português.

open sources
Milhares de "open sources" devidamente catalogadas e classificadas.

jogos
Centenas de viciantes jogos desenvolvidos em Flash.

websites
Selecção dos melhores websites em Flash.

bibliotecas
Bibliotecas de software, componentes, fontes e sons para Flash.

artigos
Artigos técnicos indispensáveis para profissionais em Flash.

Newsletter
Receba todos os dias a newsletter do Flash Web Training com as principais notícias sobre tecnologia e informática.
 
Curso Online
Curso de Flash 5 e MX com acompanhamento de formadores especializados.
 
flash shopping
Online Store com os melhores produtos dedicados ao Flash.
 
conferências
Principais conferências e eventos sobre Internet e Novas Tecnologias.
 
job opportunities
Anúncios de emprego para empresas que procuram profissionais de Flash.
 
suporte técnico
Caso tenha alguma dificuldade, contacte o nosso suporte técnico.

 

 
Homepage Tutoriais Avançados

Ficha Técnica
Autor: Flash Web Training
Versão: Flash MX
Dificuldade: Avançado
Data de Publicação: 05/09/2002


Introdução

Como documentado na ajuda do Flash MX o componente ScrollBar é destinado a ser usado com um campo de texto "text field" dinâmico. Porém tem capacidades para muito mais do que isso. Vamos aqui ver como usar este componente para fazer o scroll de um Movie Clip que pode conter qualquer coisa, não só texto.

Ficheiro Swf

Downloads:

Flash Player icon Ficheiro Fla Tutorial em PDF
 

Porque deves usar o ScrollBar com outra coisa que não uma TextField?

Normalmente o componente ScrollBar é usado para controlar o scroll de campos de texto dinâmicos e o seu uso é relativamente directo e bem documentado. Porém, se quiseres fazer o scroll de outra coisa qualquer para além de texto simples, podes não o saber fazer. Por exemplo, digamos que queres fazer o scroll de uma lista de artigos interactivos com características especiais como sugestões de popup e efeitos de rollover. Se estás a fazer o scroll de uma campo de texto estás limitado a interagir com texto simples. Porém, a tua criatividade não fica limitada se fizeres o scroll a Movie Clips ou botões ou muitos outros objectos.

Cenário do objectivo:

Tracemos o cenário do nosso objectivo. Queremos fazer o scroll de uma lista de artigos que têm um efeito de rollover e possibilidade para mais. Não queremos fazer um simples scroller, queremos usar o componente ScrollBar de forma a que nos permita fazer o scroll de uma serie de Movie Clips anexados. É este o nosso objectivo.

O resultado final será o mostrado acima

Começar:

Antes de começar-mos, abre o ficheiro scrollBarMC.fla, que se encontra no zip disponível acima, com o Flash MX, assim estaremos a olhar para a mesma coisa. Como podes ver, temos a configuração básica do ficheiro, de forma a que possas acompanhar e adicionar o código necessário seguindo os passos deste tutorial.


(Imagem 1)

A primeira coisa que verás é que definimos alguns símbolos na Biblioteca (Imgem 1). Claro que colocámos o componente ScrollBar no nosso filme e também adicionámos alguns símbolos nossos. Um é o "scrollHolder_MC" que é um Movie Clip vazio ao qual mais tarde lhe aplicaremos a barra de scroll. A seguir criámos um botão "hotspot", um botão invisível, que servirá para detectar os "rollOvers" e por fim temos o "article_MC" que é um Movie Clip com um campo de texto "TextField", uma instância de nosso botão "hotspot" e uma linha exterior. O Movie Clip "article_MC" representará um artigo da nossa lista que estará dentro do Movie Clip que será afectado pelo scroll, o "scrollHolder_MC". Também configurámos o Movie Clip "article_MC" definindo-o como símbolo lincado "symbol linkage" de maneira a que mais tarde possamos inseri-lo no nosso filme de forma dinâmica através da action "attachMovie", como está na imagem 2.


(Imagem 2)

Nota: Tudo o que está na pasta " Flash UI Componentes "da Biblioteca é reservada pelo Flash para os componentes embutidos "Built-in components" como o que estamos a usar, o ScrollBar. Esta pasta é colocada automaticamente na nossa Biblioteca sempre que usamos um componente embutido no Flash.

Dá uma olhada nos símbolos da biblioteca, mas tem cuidado para não mudar nada.

Passo 1: Criar um Movie Clip longo o suficiente para o scroll --

Temos uma configuração básica necessária para começar, mas a primeira coisa que precisamos é criar um Movie Clip que seja comprido o suficientemente para garantir a existência do scroll. Isto pode ser feito manualmente colocando várias instâncias do "article_MC" um após o outro dentro de um Movie Clip maior como que um contentor e então poderíamos fazer o scroll deste contentor, porém, é preferível fazer as coisas o mais fácil quanto possível, assim vamos criar o nosso Movie Clip dinamicamente anexando várias instâncias do Movie Clip "article_MC" ao Movie Clip VAZIO existente, o "scrollHolder_MC". Actualmente há uma instância do "scrollHolder_MC" no Stage no nosso ficheiro. Notas isso através do pequeno círculo branco situado no canto superior esquerdo do Stage, como mostra a Imagem 3.


(Imagem 3)

Temos que dar um nome a esta instância de forma a que possamos nos referir a ela mais tarde, por isso dá-lhe o nome "scrollHolder"

Agora que temos este Movie Clip vazio precisamos de o povoar com muito conteúdo. para fazer isto, adiciona o seguinte código à layer "populateScrollHolder".

1
2
3
4
5
6
7
8
9
10
11
12
for(var i=0; i<20; i++) {
	scrollHolder.attachMovie("article_MC", "article"+i, i+10);

	var tMovie = scrollHolder["article"+i];

	tMovie._x = 0;
	tMovie._y = tMovie._height * i;

	tMovie.articleLabel.text = "This is Article " + i;
}

prepareScroller();

Análise do código...

O que temos no código acima é um simples ciclo "for" que anexa 20 instâncias iguais ao Movie Clip "article_MC" ao Movie Clip "scrollHolder" que está vazio mas depois deste ciclo correr já não estará. O código é bastante directo. A primeira linha usa o método "attachMovie" para anexar uma nova instância do "article_MC" ao "scrollHolder" e concatenamos a variável i à string article para ter certeza que cada instância tem um nome de instância diferente e no parametro "depth" adicionamos o valor de i a 10 para que cada uma tenha o seu próprio nível.

A linha seguinte é só um truque para que o nosso código fique mais simples, e não temos que digitar muito.

var tMovie = scrollHolder["article"+i];

O que estamos a fazer é definir a variável temporária tMovie para apontar para a nossa nova instancia anexada. Então não teremos que escrever scrollHolder ["article"+i] nas próximas 3 linhas quando estiver-mos a ajustar a posição e definições da texto field. Agora esta linha:

tMovie._y = tMovie._height * i;

Esta linha é onde posicionamos cada instancia do Movie Clip "article_MC" recentemente anexado de forma a que se vão listando na vertical uma após a outra através da multiplicação da altura do "article_MC" pelo número de anexos feitos.

Finalmente, com a nossa última linha de código do ciclo definimos o campo de texto "articleLabel" que está dentro de cada instância do "article_MC" de forma a que exiba algum texto que nos diga de que artigo se trata.

tMovie.articleLabel.text = " Este é artigo nº" + i;

Uma vez o ciclo completo já não temos o nosso Movie Clip "scrollHolder" vazio, está povoado com 20 instâncias do "article_MC", cada um diferente e interactivo, pois cada um é um novo Movie Clip.

Agora que povoámos o nosso Movie Clip "scrollHolder" com muito conteúdo, temos que configurar o nosso componente ScrollBar de forma a que este execute o scroll do nosso Movie Clip que contém o conteúdo. Passemos a isso...


Passo 2: configuração do componente ScrollBar para fazer o scroll do nosso conteúdo

O próximo passo é anexar e configurar o componente ScrollBar de forma a que este possa ser usado para fazer o scroll do conteúdo que construímos no passo 1. Para configurar o ScrollBar, adiciona o seguinte código à layer setupScroller que já foi criada.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function prepareScroller() {
_root.attachMovie("FScrollBarSymbol", "theScroller", 50);
theScroller._x = Stage.width - theScroller._width; theScroller._y = 0;
theScroller.setSize(Stage.height); var scrollMax = scrollHolder._height-Stage.height+10;
theScroller.setScrollProperties (200, 0, scrollMax); theScroller.setSmallScroll(10);
theScroller.setChangeHandler ("scrollHandler"); } function scrollHandler(component) { scrollHolder._y = (component.getScrollPosition() * -1); }

Nota: É importante que o código na layer setupScroller esteja sobre o código da layer populateScrollHolder porque será executado primeiro e só então é que a função prepareScroller será definida assim podemos chamar a função depois de corrermos o nosso ciclo for e povoar o scrollHolder.


Análise do código...

Comecemos pela linha 3. É bastante simples... basicamente anexa uma instância do componente ScrollBar ao nossa Stage, dá a esta instância o nome "theScroller" e coloca-a no nível 50. As linhas 5 e 6 são razoavelmente auto explicativas, assim passemos à linha 8. Aqui, na verdade fixamos o tamanho do ScrollBar usando o "Built-in method setSize". Queremos, neste caso, que o ScrollBar seja tão alto quanto o Stage, por isso atribuímos ao setSize o valor da altura do Stage, "Stage.height".

Passemos à linha 9, talvez a mais importante de todo o código do filme. Estamos a definir a variável local temporária scrollMax para ser a posição máxima do scroll para o componente ScrollBar. Aqui queremos ter a certeza que fixamos o scrollMax de forma a que coincida com a altura do Movie Clip "scrollHolder" (que é o que será afectado pelo scroll) menos a altura do Stage. A razão de subtrair-mos a altura do Stage é porque se não o fizéssemos então o Movie Clip "theScroller" fazia o scroll até acima do ponto mais alto do "ScrollBar", ou seja, desaparecia do Stage. Explicaremos isto mais tarde.

A próxima linha (linha 10) permite-nos definir as propriedades do componente ScrollBar. As propriedades trabalham assim...

setScrollProperties(pageSize, minPos, maxPos)

O parâmetro minPos representa a posição mínima permitida ao ScrollBar e deve ser um valor inteiro. O maxPos representa a posição máximo permitida ao ScrollBar e também deve ser um inteiro. Basicamente, podemos definir estes valores de forma a que o nosso ScrollBar comece numa posição (minPos) e possa sofrer o scroll até uma posição limitada que também definimos (maxPos). Com estes limites definidos, podemos então ter a posição actual do ScrollBar e mover o nosso Movie Clip "scrollHolder" em função desta posição.

Truque: O parâmetro pageSize do método setScrollProperties não será ignorado completamente, porém o seu valor faz-nos uma pequena diferença neste exemplo. Para mais informação sobre isto, consulta a documentação do Flash MX. Para os nosso propósitos definimos este valor como 200.

A seguir temos a linha 11. Aqui estamos a usar o método "setSmallScroll" do componente ScrollBar para dizer ScrollBar quantas posições se deve mover quando o utilizador carregar num dos botões seta do ScrollBar. Por defeito, é definido como 1, mas neste caso não queremos este valor porque o avanço de 1 pixel tornaria o scroll muito lento. Por isso, definimos isto em 10. Poderás testar variando este valor.

Nota: Este valor pode ser ajustado e poderia ser dynamically escolhidos baseado na altura do filme que será enrolado.

Finalmente, a linha 13 é usada para especificar a mudança do "handler function" para o nosso ScrollBar, o "theScroller", que neste caso é uma função que nós só definimos na linha 16.


Permitir que o ScrollBar mova o scrollHolder

Repara na linha 16, quando definimos a nossa função "scrollHandler" fizemo-lo com um parâmetro chamado "component". Todas as "handler function" são permitidas a um parâmetro que normalmente é uma referência do componente que chamou a "handler functions". Neste caso o component é referencia para o "theScroller" uma instância do nosso ScrollBar.

Nota: Escolhemos "component" como o nome do parâmetro a ser passado, mas podia muito bem ser qualquer outro nome ao teu gosto. Desde que definas o parâmetro então podes ter uma referência do componente para o invocar na função handler.


Como podes ver, só temos 1 linha de código na função scrollHandler para controlar o movimento do Movie Clip "scrollHolder". Agora a linha 17 é simples de entender. Lembra-te que esta função só é chamada quando o utilizador interage com o ScrollBar e serve para mudar a sua posição. Na linha 17 apenas obtemos a posição actual do ScrollBar e de acordo com ela definimos a coordenada Y do nosso MovieClip "scrollHolder". Entretanto repara que multiplicámos a posição actual por -1. Isto é assim porque o Movie Clip "scrollHolder" move-se para cima em vez de ir para baixo quando fazemos o scroll para baixo.

Esta linha de código é a razão de definirmos o parâmetro maxPos do ScrollBar como a altura do Movie Clip "scrollHolder"... e se pensares bem, faz sentido que subtraiamos a altura do Stage à altura do Movie Clip "scrollHolder" (linha 9). Se não fizéssemos isto, então quando o utilizador movesse o ScrollBar para a sua posição máxima (a altura do scrollHolder), a posição em Y do "scrollHolder" seria definido como negativo na sua altura o que o faria desaparecer completamente do stage. Mas se subtrairmos a altura do stage quando definimos a posição máxima do sacro então limitamos este valor de forma a permanecer no stage.

Conferir o teu trabalho:

Agora que todo o nosso código está no lugar e tudo foi explicado, devemos ter um produto acabado a funcionar que tem precisamente o mesmo aspecto do exemplo inicial deste tutorial. Porém, se achas que algo não está a trabalhar do modo que esperavas ou não obtiveste os mesmos resultados que nós, podes compara o teu trabalho com o FLA completo que está incluído nos ficheiros que carregaste no inicio deste tutorial scrollBarMC_Complete.fla. O ficheiro FLA final está todo comentado para te ajudar a entender cada linha de código.

Conclusão
Esperamos que este tutorial te tenha dado alguma ideia de como o componente ScrollBar pode ser usado fora do uso documentado de anexar um campo de texto. Há muitas outras coisas que podes criar usando este método de nteracção com o ScrollBar. Imagina fazer um slider de cor, um slider de volume ou muitas outras coisas interessantes simplesmente alterando o modo de uso do componente ScrollBar. Esperamos que aches este tutorial claro e útil.

 
« Anterior   
 
Copyright ©2002-2008 Desenvolvimento de Sites , Serviços de Web Design Todos os direitos reservados