Scrollbar para MovieClips e TextFields

» Flash » Scrollbar para MovieClips e TextFields

Scrollbar para MovieClips e TextFields

Fala Comunidade! Estamos na área futebol clube mais uma vez para trazer algo de utilidade públic =D. Iremos ver dois pontos na coluna de hoje:

Como criar um scrollbar que serve tanto para MovieClip quanto TextFields
Criar nossos próprios componentes.

Criando um ScrollBar

Primeiramente, vamos criar nosso esqueleto de scrollbar, eu fiz um bem simples, para não perder muito tempo com layout e partir mais para a prática.

 // coloca no tamanho normal
_xscale = _yscale = 100;
// pode ser um movieclip ou um textfield
var alvo = _parent[alvo];
// posição inicial do movieclip em y
var sy:Number = alvo._y;
// altera o tamanho da barra
track._height = track_height;
// coloca o botão de baixo abaixo da barra
btn_baixo._y = track._y + track._height;
// tira a maozinha dos botões
btn_baixo.useHandCursor = btn_cima.useHandCursor = pan.useHandCursor = false;
 
// mínimo em _y q o pan pode ir
var miny:Number = Math.round( track._y );
// máximo em _y q o pan pode ir
var maxy:Number = Math.round( track._y + track._height - pan._height );
 
// quando o cara pressionar o botão de cima
btn_cima.onPress = function () {
subindo = true;
descendo = false;
}
// quando tirar o mouse
btn_cima.onRelease = btn_cima.onReleaseOutside = function () {
subindo = descendo = false;
}
// quando o cara pressionar o botão de baixo
btn_baixo.onPress = function () {
subindo = false;
descendo = true;
}
// quando tirar o mouse
btn_baixo.onRelease = btn_baixo.onReleaseOutside = function () {
subindo = descendo = false;
}
 
// quando pressionar o pan
pan.onPress = function () {
// inicia o arrastamento
startDrag(this,false,this._x,miny,this._x,maxy);
}
 
// quando soltar o mouse
pan.onRelease = pan.onReleaseOutside = function () {
// para o arrastamento
stopDrag();
}
 
// cria o onEnterFrame
this.onEnterFrame = function () {
// se estiver subindo
if(subindo) {
// se não estiver a ponto de ir além do que pode
if(pan._y - 1 &gt; miny) {
pan._y–;
} else {
pan._y = miny;
}
}
// se estiver descendo
if(descendo) {
// se não estiver a ponto de ir além do que pode
if(pan._y + 1 &lt; maxy) {
pan._y++;
} else {
pan._y = maxy;
}
}
// faz um switch para saber qual o tipo de objeto que estamos usando
switch(typeof(alvo)) {
// se for um movieclip
case “movieclip”:
// Calcula
var s:Number = ((pan._y-miny)/(maxy-miny))*100;
var p:Number = (alvo._height - mascara)/100;
// move o objeto
alvo._y = sy - (p*s);
break;
// se for um TextField (padrão)
default:
// cacula
var s:Number = ((pan._y-miny)/(maxy-miny))*100;
var p:Number = alvo.maxscroll/100;
// move o objeto
alvo.scroll = p * s;
break;
}
}

Após isso, chegou a hora de convertermos nosso movieclip para um componente!

Criando nossos próprios componentes

Caso você nunca tenha criado um componente, irei mostrar agora a forma mais simples de se criar um. É bem fácil.

Clique com o botão direito em cima do objeto na biblioteca e selecione a opção Component definition;
Abrir-se-á uma nova janela solicitando as opções do novo componente.

As opções a cima são:

Name: nome a ser exibido para o usuário na barra Componente Inspector;
Variable: nome real da variável a ser usada dentro do ActionScript;
Value: valor padrão da variável;
Type: tipo da variável.

Os parâmetros colocados neste exemplo são:

Alvo: nome de instância do objeto. Pode ser um movieclip ou um textfield. Não é necessário colocar o caminho absoluto no nome (_root.objeto). Se eles estiverem na mesma linha de tempo, coloque somente o nome de instancia, pois em nosso ActionScript colocamos: var alvo = _parent[alvo], indicando que estamos pegando na linha de tempo anterior a que a action foi colocada;
Altura da mascara: altura da mascara que está sendo utilizada para cobrir parte do movie clip;
Altura da barra: altura desejada para a barra do scrollbar.

Clique em OK. Você notará que o ícone do objeto na biblioteca mudará, indicando que se trata de um componente. Pronto! Agora é só você arrastar para o palco e testar!

@braços e fiquem com Deus!

23 Comments to “Scrollbar para MovieClips e TextFields”

You can follow all the replies to this entry through the comments feed.

Rafael_Grantham

Maio 22, 2008 at 12:50 pm | Permalink

Amigo, muito legal o Tutorial mas não consigo fazer funcionar. Segui todos os passos e tenho algumas dúvidas.
As setas devem ser Movies ou Botões?
As linhas de comando vão nas ações do Objeto ou No frame01 do palco?
No final da montagem do objeto, todos com os instace names, convertemos tudo para um movie e assim para um componente?
Desculpe pelas dúvidas mas ainda estou começando no assunto. Ficarei grato se puderem me ajudar. Grande abraço!
Rafael.
Rafael_Grantham

Maio 22, 2008 at 12:52 pm | Permalink

Vou colocar abaixo a janela de erros para auxílio.
Grato!

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 9: Statement must appear within on/onClipEvent handler
_xscale = _yscale = 100;

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 11: Statement must appear within on/onClipEvent handler
var alvo = _parent[alvo];

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 13: Statement must appear within on/onClipEvent handler
var sy:Number = alvo._y;

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 15: Statement must appear within on/onClipEvent handler
track._height = track_height;

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 17: Statement must appear within on/onClipEvent handler
btn_baixo._y = track._y + track._height;

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 19: Statement must appear within on/onClipEvent handler
btn_baixo.useHandCursor = btn_cima.useHandCursor = pan.useHandCursor = false;

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 22: Statement must appear within on/onClipEvent handler
var miny:Number = Math.round( track._y );

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 24: Statement must appear within on/onClipEvent handler
var maxy:Number = Math.round( track._y + track._height – pan._height );

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 27: Statement must appear within on/onClipEvent handler
btn_cima.onPress = function () {

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 32: Statement must appear within on/onClipEvent handler
btn_cima.onRelease = btn_cima.onReleaseOutside = function () {

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 36: Statement must appear within on/onClipEvent handler
btn_baixo.onPress = function () {

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 41: Statement must appear within on/onClipEvent handler
btn_baixo.onRelease = btn_baixo.onReleaseOutside = function () {

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 46: Statement must appear within on/onClipEvent handler
pan.onPress = function () {

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 52: Statement must appear within on/onClipEvent handler
pan.onRelease = pan.onReleaseOutside = function () {

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 63: Syntax error.
pan._y–;

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 58: Statement must appear within on/onClipEvent handler
this.onEnterFrame = function () {

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 69: Statement must appear within on/onClipEvent handler
if(descendo) {

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 78: Statement must appear within on/onClipEvent handler
switch(typeof(alvo)) {

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 96: Unexpected ‘}’ encountered
}

Total ActionScript Errors: 19 Reported Errors: 19

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 2: Statement must appear within on/onClipEvent handler
_xscale = _yscale = 100;

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 4: Statement must appear within on/onClipEvent handler
var alvo = _parent[alvo];

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 6: Statement must appear within on/onClipEvent handler
var sy:Number = alvo._y;

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 8: Statement must appear within on/onClipEvent handler
track._height = track_height;

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 10: Statement must appear within on/onClipEvent handler
btn_baixo._y = track._y + track._height;

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 12: Statement must appear within on/onClipEvent handler
btn_baixo.useHandCursor = btn_cima.useHandCursor = pan.useHandCursor = false;

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 15: Statement must appear within on/onClipEvent handler
var miny:Number = Math.round( track._y );

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 17: Statement must appear within on/onClipEvent handler
var maxy:Number = Math.round( track._y + track._height – pan._height );

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 20: Statement must appear within on/onClipEvent handler
btn_cima.onPress = function () {

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 25: Statement must appear within on/onClipEvent handler
btn_cima.onRelease = btn_cima.onReleaseOutside = function () {

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 29: Statement must appear within on/onClipEvent handler
btn_baixo.onPress = function () {

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 34: Statement must appear within on/onClipEvent handler
btn_baixo.onRelease = btn_baixo.onReleaseOutside = function () {

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 39: Statement must appear within on/onClipEvent handler
pan.onPress = function () {

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 45: Statement must appear within on/onClipEvent handler
pan.onRelease = pan.onReleaseOutside = function () {

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 56: Syntax error.
pan._y–;

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 51: Statement must appear within on/onClipEvent handler
this.onEnterFrame = function () {

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 62: Statement must appear within on/onClipEvent handler
if(descendo) {

**Warning** Scene=Scene 1, layer=Layer 1, frame=1:Line 73: statements that appear before the first ‘case’ in a ’switch’ statement are ignored
case ‘movieclip’:

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 71: Statement must appear within on/onClipEvent handler
switch(typeof(alvo)) {

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 89: Unexpected ‘}’ encountered
}
Júlio Sampaio

Junho 15, 2008 at 7:50 pm | Permalink

cara, legal a iniciativa…só que não funcionou (flash 8)..3 erros foram apresentados…e eu tava precisando desse tutorial pra usar em outro que indicou esse =S
rodrigo

Junho 19, 2008 at 6:09 pm | Permalink

kra, na boa , nao rolou aqui
alan

Julho 10, 2008 at 4:44 pm | Permalink

oi ainda não consegui entender como criar um scroll, vi a aula que ensina a criar scroll pelo layout e não soube como criar o quadro chave na camada action.. se puder me ajudar ficarei mt grato
wu

Agosto 20, 2008 at 4:18 pm | Permalink

bom.. o meu rodou sem erros..
mas não sobe nem desce a pagina como deveria fazer.. imagino q o meu erro esteja na hora de editar o componente.. o passo da criação do componente ta apagado aqui!!!

algm completa por favor!rs

valeu!
Ana Paula

Agosto 26, 2008 at 1:48 am | Permalink

Oi Hugo
Sempre leio seus tutoriais eles me são muito úteis, vc poderia completar esse aqui, uma parte das informações não aparece

Scrollbar para MovieClips e TextFields
Data de publicação: 18-08-2005
Visitas: 4945

obrigada
Rodrigo

Setembro 4, 2008 at 2:48 pm | Permalink

Eu também fiz aqui mas não consegui fazer isso funcionar….
Fabricio Garcia

Setembro 9, 2008 at 8:06 am | Permalink

Oie, preciso mto desse tutorial, mais aki ta dando erro, teria como nos explicar melhor?

Obrigado
Thyago Trajano

Setembro 16, 2008 at 5:47 pm | Permalink

Galera…eu consegui normalmente…tah tudo certinho… só faltou um sinal de “-” nesse trecho:
// cria o onEnterFrame
this.onEnterFrame = function () {
// se estiver subindo
if(subindo) {
// se não estiver a ponto de ir além do que pode
if(pan._y – 1 > miny) {
pan._y–; //aqui entra dois sinais de -
} else {
pan._y = miny;
}

caso alguem queira…é só me enviar um email que passo o fla…. onajart@hotmail.com

abraços e muito obrigado pelo tutorial…
FabioTeofilo

Setembro 26, 2008 at 2:27 pm | Permalink

q isso, nao da pra entender nada desse tutorial…

são botões ou movieclips ?

=S

esse site ja foi melhor de tutoriais!
Estevam

Outubro 28, 2008 at 7:33 pm | Permalink

o unico botão que tem ai é o Drag .. o resto é apenas mc
Lucia

Janeiro 21, 2009 at 10:37 am | Permalink

Não sei como mudar as cores do scroll. Alguém sabe como incluir estes comandos?
Obrigada
Lucia

Janeiro 21, 2009 at 10:38 am | Permalink

Desculpem, por favor se alguém souber como mudar as cores do scroll, mande a orientação para o meu e-mail: lhpalma@uol.com.br
Vinicius

Fevereiro 10, 2009 at 2:52 pm | Permalink

Consegui que funcionasse mudando duas coisas,
uma delas é o esquema do — que comentaram acima e a outra, é na linha:

var p:Number = (alvo._height – mascara)/100;

o valor da mascara esta errado, ai alterei a linha para:

var p:Number = (alvo._height – 100)/100;

att,
Guigo

Março 13, 2009 at 6:18 pm | Permalink

Consegui com que funcionasse, mas ao clicar no botão para baixo o scroll dá um pulo ao invés de descer devagar e também ele não para…. se continuar clicando ele continua descendo e não para dentro ao encontrar o botão de baixo!

alguém consegue me ajudar??

Obrigado
Michelli

Abril 18, 2009 at 11:19 pm | Permalink

Eu não consigo fazer este tutorial, quando muda a parte: pan._y–; //aqui entra dois sinais de -
todo o código dá erro.
Cerbaro

Junho 5, 2009 at 1:55 am | Permalink

Muito bom!
Rodrigues

Julho 23, 2009 at 1:57 pm | Permalink

Os passos desse tutorial não estão muito claros. Não consegui fazer. Mais já vi o resultado em outro artigo, muito bom.
Felipe

Agosto 29, 2009 at 2:31 pm | Permalink

o caminho da mascara esta errado por isso nao acha o tamanho da mascara.
vc deve mudar:
var p:Number = (alvo._height – mascara)/100;
para
var p:Number = (alvo._height – _parent.mask._height)/100;
no meu caso a mascara está no tempo anterior

e o _parent[alvo] esta errado deveria ser _parent.alvo
A Bahia

Setembro 11, 2009 at 11:57 am | Permalink

Também me dá erro, nessa parte do cógigo:

if(pan._y – 1 > miny) {
pan._y –-;
} else {

Se fosse possivel esclarecer melhor os MCs que devem ser criados, iria ajudar.
Ricardo

Novembro 25, 2009 at 9:17 am | Permalink

seguinte nao da certo
existe erro nessa parte

if(pan._y – 1 > miny) {
pan._y –-;
} else {
RCalasso

Fevereiro 2, 2010 at 9:42 am | Permalink

Tive alguns problemas tbm na hora do desenvolvimento, mas acabei conseguindo.
Abaixo vai o codigo correto.
// coloca no tamanho normal
_xscale = _yscale = 100;
// pode ser um movieclip ou um textfield
var alvo = _parent[alvo];
// posição inicial do movieclip em y
var sy:Number = alvo._y;
// altera o tamanho da barra
track._height = track_height;
// coloca o botão de baixo abaixo da barra
btn_baixo._y = track._y + track._height;
// tira a maozinha dos botões
btn_baixo.useHandCursor = btn_cima.useHandCursor = pan.useHandCursor = false;

// mínimo em _y q o pan pode ir
var miny:Number = Math.round( track._y );
// máximo em _y q o pan pode ir
var maxy:Number = Math.round( track._y + track._height – pan._height );

// quando o cara pressionar o botão de cima
btn_cima.onPress = function () {
subindo = true;
descendo = false;
}
// quando tirar o mouse
btn_cima.onRelease = btn_cima.onReleaseOutside = function () {
subindo = descendo = false;
}
// quando o cara pressionar o botão de baixo
btn_baixo.onPress = function () {
subindo = false;
descendo = true;
}
// quando tirar o mouse
btn_baixo.onRelease = btn_baixo.onReleaseOutside = function () {
subindo = descendo = false;
}

// quando pressionar o pan
pan.onPress = function () {
// inicia o arrastamento
startDrag(this,false,this._x,miny,this._x,maxy);
}

// quando soltar o mouse
pan.onRelease = pan.onReleaseOutside = function () {
// para o arrastamento
stopDrag();
}

// cria o onEnterFrame
this.onEnterFrame = function () {
// se estiver subindo
if(subindo) {
// se não estiver a ponto de ir além do que pode
if(pan._y – 1 > miny) {
pan._y–;
} else {
pan._y = miny;
}
}
// se estiver descendo
if(descendo) {
// se não estiver a ponto de ir além do que pode
if(pan._y + 1 < maxy) {
pan._y++;
} else {
pan._y = maxy;
}
}
// faz um switch para saber qual o tipo de objeto que estamos usando
switch(typeof(alvo)) {
// se for um movieclip
case "movieclip":
// Calcula
var s:Number = ((pan._y-miny)/(maxy-miny))*100;
var p:Number = (alvo._height – 100)/100;
// move o objeto
alvo._y = sy – (p*s);
break;
// se for um TextField (padrão)
default:
// cacula
var s:Number = ((pan._y-miny)/(maxy-miny))*100;
var p:Number = alvo.maxscroll/100;
// move o objeto
alvo.scroll = p * s;
break;
}
}

Os problemas que encontrei foi:
o sinal de – na linha 56
o tipo das aspas na linha 73,
e trocar "mascara" por "100" na linha 76

espero ter ajudado.

Boa sorte a todos