Scroll Simplificado

por Guilherme Moschen em 26/12/2007 as 17:43

Nessas últimas semanas quando estava desenvolvendo alguns dos nossos jogos em Flash, eu cheguei na tela do ranking. Vendo o layout, eu percebi que o ranking tinha um scroll customizado.
A primeira instância, eu pensei: tranqüilo, o Flash tem um componente pronto que faz isso(ScrollPane), porque reinventar a roda?

Porém quando comecei o customizar o scroll para o layout do jogo(Memória Numérica) tive muito trabalho. Pois o componente do Flash foi desenvolvido para funcionar como um scroll normal do Windows, igual a esse que seu navegador utiliza(-->>). E o layout do scroll do jogo é diferente. E agora?

Como os jogos da CubaGames normalmente têm ranking, por que não fazer um scroll que seja simples e fácil de se adaptar ao layout dos jogos? E claro, que eu tenha que desenvolver apenas uma vez, que possa importar a biblioteca pra qualquer projet e utilizá-la de forma simples e rápida.

PLAIN TEXT
Actionscript:
  1. /**
  2. * Classe que implementa a função a scroll simplificada
  3. * Somente foi tratado o scroll vertical
  4. * @author Guilherme Moschen
  5. * @version 1.0
  6. */
  7.  
  8. package com.cubagames.util {
  9.  
  10. import flash.display.DisplayObject;
  11. import flash.display.Sprite;
  12. import flash.events.MouseEvent;
  13. import flash.geom.Point;
  14. import flash.geom.Rectangle;
  15.  
  16. public class Scroll {
  17. private var bolaScroll:Sprite;
  18. private var areaScroll:Rectangle;
  19. private var conteudo:DisplayObject;
  20. private var posicaoInicialBolaScroll:Point;
  21. private var botaoCima:DisplayObject;
  22. private var botaoBaixo:DisplayObject;
  23. private var mousePressionado:Boolean;
  24. private var alturaConteudo:int;
  25. private var precisaScroll:Boolean;
  26.  
  27. // Seta a velocidade do Scroll quando é usado os botões para deslizar o conteúdo
  28. public static var VELOCIDADE_SCROLL:int = 9;
  29.  
  30. /**
  31. * Construtora da classe
  32. * @param    bolaScroll  - Sprite que representa a bola(ou outra forma) do scroll. O bola do scroll sempre deslizará para baixo, a distância de deslizamento é a altura da areaScroll
  33. * @param    areaScroll  - Rectangle que representa a area do scroll, funciona da mesma forma que o efeito clipping em Sprite. A posição X e Y do scroll deve-se ser 0, pois essa será posição inicial do clipping dentro do conteúdo.
  34. * @param    conteudo    - O conteúdo que será implementado o scroll
  35. * @param    botaoCima   - Botão que representa a seta superior do scroll
  36. * @param    botaoBaixo  - Botão que representa a seta inferior do scroll
  37. */
  38. public function Scroll( bolaScroll:Sprite, areaScroll:Rectangle, conteudo:DisplayObject, botaoCima:DisplayObject, botaoBaixo:DisplayObject ):void {
  39. this.bolaScroll = bolaScroll;
  40. this.areaScroll = areaScroll;
  41. this.conteudo = conteudo;
  42. this.botaoCima = botaoCima;
  43. this.botaoBaixo = botaoBaixo;
  44. this.mousePressionado = false;
  45.  
  46. // Não precisa de scroll, se a altura do conteúdo for menor que a altura do scroll
  47. if ( this.conteudo.height <this.areaScroll.height )
  48. this.precisaScroll = false;
  49. else
  50. this.precisaScroll = true;
  51.  
  52. if ( this.precisaScroll ) {
  53. // Salva a posição inicial da bola da Scroll para sempre saber quanto foi o descolamento desde o ponto inicial até a posição atual da bola do scroll
  54. this.posicaoInicialBolaScroll = new Point(this.bolaScroll.x, this.bolaScroll.y);
  55.  
  56. //Quando é setado um scroll para um DisplayObject a altura e largura, viram a altura e largura do scroll. Salva-se então para saber o tamanho real do conteúdo
  57. this.alturaConteudo = this.conteudo.height;
  58. // Tratamento feito para sempre ter metada do conteúdo aparecendo na tela
  59. if ( this.alturaConteudo> this.areaScroll.height )
  60. this.alturaConteudo -= this.areaScroll.height/2;
  61.  
  62. // Adiciona os eventos do mouse
  63. this.bolaScroll.addEventListener( MouseEvent.MOUSE_DOWN, this.bolaScroll_Down);
  64. this.bolaScroll.stage.addEventListener(MouseEvent.MOUSE_UP, this.stage_Up);
  65. // Seta a área do scroll no conteúdo.
  66. this.conteudo.scrollRect = this.areaScroll;
  67. }
  68. else
  69. this.bolaScroll.visible = false;
  70. }
  71.  
  72. /**
  73. * Método que reajusta as novas posições do scroll e do conteúdo
  74. */
  75. public function ajustaScroll():void {
  76. // Botões
  77. if ( this.precisaScroll ) {
  78. // É trada dessa forma para que o usuário não tenha que ficar clicando para baixar ou subir o conteúdo.
  79. // Não foi utilizado os eventos porque, caso fosse usados, eles seriam envocados apenas uma vez
  80. if ( !this.mousePressionado ) {
  81. if ( this.botaoCima.hitTestPoint(this.botaoCima.stage.mouseX, this.botaoCima.stage.mouseY) && this.bolaScroll.y> this.posicaoInicialBolaScroll.y  ) {
  82. this.bolaScroll.y -= Scroll.VELOCIDADE_SCROLL;
  83. if ( this.bolaScroll.y <this.posicaoInicialBolaScroll.y )
  84. this.bolaScroll.y = this.posicaoInicialBolaScroll.y;
  85. }
  86. else if ( this.botaoBaixo.hitTestPoint(this.botaoBaixo.stage.mouseX, this.botaoBaixo.stage.mouseY) && this.areaScroll.y <this.alturaConteudo ) {
  87. this.bolaScroll.y += Scroll.VELOCIDADE_SCROLL;
  88. if ( this.bolaScroll.y> this.posicaoInicialBolaScroll.y + this.areaScroll.height )
  89. this.bolaScroll.y = this.posicaoInicialBolaScroll.y + this.areaScroll.height;
  90. }
  91. }
  92.  
  93. // Regra de 3 para saber a porcentagem do deslocamento desde o ponto inicial até a posição atual da bola do scroll
  94. var variacao:Number = this.areaScroll.height - (this.bolaScroll.y - this.posicaoInicialBolaScroll.y);
  95. variacao = 1 - (variacao / this.areaScroll.height);
  96. this.areaScroll.y = this.alturaConteudo * variacao;
  97. // Atualiza o scroll
  98. this.conteudo.scrollRect = this.areaScroll;
  99. }
  100. }
  101.  
  102. /**
  103. * Método que implementa o tratamento do evento MOUSE_DOWN, quando o botão do mouse estiver pressionado, a bola do scroll
  104. * @param    event - Evento
  105. */
  106. private function bolaScroll_Down( event:MouseEvent ):void {
  107. this.mousePressionado = true;
  108. this.bolaScroll.startDrag(false, new Rectangle(this.posicaoInicialBolaScroll.x, this.posicaoInicialBolaScroll.y, 0, this.areaScroll.height));
  109. }
  110.  
  111. /**
  112. * Método que implementa o tratamento do evento MOUSE_UP, quando o botão do mouse for solto(released)
  113. * O evento foi adicionado no stage para que ele possa ser trato em qualquer parte do SWF
  114. * @param    event - Evento
  115. */
  116. private function stage_Up( event:MouseEvent ):void {
  117. this.mousePressionado = false;
  118. this.bolaScroll.stopDrag();
  119. }
  120. }
  121. }

Eu desenvolvi uma classe Scroll para atender a necessidade em questão.
As explicações estão no próprio código, porém a grande vantagem que essa classe possui é uma classe portátil para diversos sistemas, os botões e conteúdos podem estar em qualquer lugar da tela, é fácil de ser customizável e é mais leve que o componente do Flash.

O scroll pode ser visto online nesse link e baixado nesse link.

Aquele abraço!

Categorias: Desenvolvimento, Flash - ActionScript | 1 Comment »

Artigos Relacionados


Both comments and pings are currently closed.

1 Comentário

  1. eu tenho um scroll que eu desenvolvi de uma forma meio lusitana, mas funciona bem e necessita de minimos ajustes para cada caso, mas com ela o scroll do mouse funciona e a barra de rolagem tem o height dinamico, que se ajusta de acordo com o tamanho do box e o tamanho do texto que sobra, se você quiser posso te passar para fazer os ajustes que você quiser… quando eu desenvolvi ainda nao usei function pois ainda não sabia, mas ela funciona que é uma maravilha

    Comentário de Juliano Russo - 20/01/2008 às 2:08 pm #