Scrollbar para MovieClips e TextFields

agosto 18, 2005 | Arquivado em: Flash | Escrito por: hugo

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

Escrito por hugo on agosto 18, 2005. Arquivado em Flash. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo

24 respostas a Scrollbar para MovieClips e TextFields

Rafael_Grantham maio 22, 2008 - 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 maio 22, 2008 - 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 junho 15, 2008 - 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 junho 19, 2008 - 6:09 pm

kra, na boa , nao rolou aqui
alan julho 10, 2008 - 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 agosto 20, 2008 - 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 agosto 26, 2008 - 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 setembro 4, 2008 - 2:48 pm

Eu também fiz aqui mas não consegui fazer isso funcionar….
Fabricio Garcia setembro 9, 2008 - 8:06 am

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

Obrigado
Thyago Trajano setembro 16, 2008 - 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 setembro 26, 2008 - 2:27 pm

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 - 7:33 pm

o unico botão que tem ai é o Drag .. o resto é apenas mc
Lucia janeiro 21, 2009 - 10:37 am

Não sei como mudar as cores do scroll. Alguém sabe como incluir estes comandos?
Obrigada
Lucia janeiro 21, 2009 - 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 fevereiro 10, 2009 - 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 março 13, 2009 - 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 abril 18, 2009 - 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 junho 5, 2009 - 1:55 am

Muito bom!
Rodrigues julho 23, 2009 - 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 agosto 29, 2009 - 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 setembro 11, 2009 - 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 novembro 25, 2009 - 9:17 am

seguinte nao da certo
existe erro nessa parte

if(pan._y – 1 > miny) {
pan._y –-;
} else {
RCalasso fevereiro 2, 2010 - 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
Sergio maio 5, 2011 - 3:32 pm

não consegui, da erro nas linhas 55,56 e 57- estou usando o Flash 8, se alguem puder me ajudar desde ja agradeço.
um abraço

**Error** Scene=Scene 1, layer=actions, frame=1:Line 55: Unexpected ‘gt’ encountered
if(pan._y – 1 > miny) {

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

**Error** Scene=Scene 1, layer=actions, frame=1:Line 57: Unexpected ‘}’ encountered
} else {

Total ActionScript Errors: 3 Reported Errors: 3

Scrollbar para MovieClips e TextFields

Criando um ScrollBar

Criando nossos próprios componentes

24 respostas a Scrollbar para MovieClips e TextFields

Deixe uma resposta Cancelar resposta

Autor do Artigo

Hugo Ferreira da Silva

Artigos Recentes

O MXStudio

Últimos Artigos

Últimos Comentários

Scrollbar para MovieClips e TextFields

Criando um ScrollBar

Criando nossos próprios componentes

24 respostas a Scrollbar para MovieClips e TextFields

Deixe uma resposta Cancelar resposta

Autor do Artigo

Hugo Ferreira da Silva

Artigos Recentes

Tags

O MXStudio

Últimos Artigos

Últimos Comentários