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.

Downloads:

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)

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);
}

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.

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.

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.

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.