Scrollbar para MovieClips e TextFields

Publicado por hugo em 18/08/2005

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!

hugo

23 usuário comentou em " Scrollbar para MovieClips e TextFields "

Assine o Feed de Comtentários ou URL de Trackback

Rafael_Grantham disse,
Enviado em 22-05-2008 às 12:50 pm

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 disse,
Enviado em 22-05-2008 às 12:52 pm

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 disse,
Enviado em 15-06-2008 às 7:50 pm

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 disse,
Enviado em 19-06-2008 às 6:09 pm

kra, na boa , nao rolou aqui

alan disse,
Enviado em 10-07-2008 às 4:44 pm

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 disse,
Enviado em 20-08-2008 às 4:18 pm

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 disse,
Enviado em 26-08-2008 às 1:48 am

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 disse,
Enviado em 04-09-2008 às 2:48 pm

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

Fabricio Garcia disse,
Enviado em 09-09-2008 às 8:06 am

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

Obrigado

Thyago Trajano disse,
Enviado em 16-09-2008 às 5:47 pm

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 disse,
Enviado em 26-09-2008 às 2:27 pm

q isso, nao da pra entender nada desse tutorial…

são botões ou movieclips ?

esse site ja foi melhor de tutoriais!

Estevam disse,
Enviado em 28-10-2008 às 7:33 pm

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

Lucia disse,
Enviado em 21-01-2009 às 10:37 am

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

Lucia disse,
Enviado em 21-01-2009 às 10:38 am

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 disse,
Enviado em 10-02-2009 às 2:52 pm

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 disse,
Enviado em 13-03-2009 às 6:18 pm

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 disse,
Enviado em 18-04-2009 às 11:19 pm

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 disse,
Enviado em 05-06-2009 às 1:55 am

Muito bom!

Rodrigues disse,
Enviado em 23-07-2009 às 1:57 pm

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 disse,
Enviado em 29-08-2009 às 2:31 pm

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 disse,
Enviado em 11-09-2009 às 11:57 am

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 disse,
Enviado em 25-11-2009 às 9:17 am

seguinte nao da certo
existe erro nessa parte

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

RCalasso disse,
Enviado em 02-02-2010 às 9:42 am

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

Deixe o seu comentário abaixo...

MXStudio © 2003-2010. Todos os direitos reservados.
É expressamente proibido a cópia, reprodução e difusão dos textos, fotos e outros elementos contidos neste site sem autorização expressa do MXStudio.

MXStudio - Adobe e Macromedia - Artigos, tutoriais, colunas e muito mais