Tutorial Flash: Barra de Progresso Arrastável

Uma barra de progresso que segue o mouse, uma animação super interessante que pode ser usada de varias formas.

Por | @oficinadanet Softwares

Se você não sabe como criar seu próprio Draggable Barra de Progresso em Flash , então este é o lugar certo. Primeiro de tudo, a usabilidade deste barra de progresso pode ser múltiplo, mesmo se falamos de carregamento, as barras de rolagem, buscando volume, ou barras do gráfico. Outra vantagem quando você usa seu própria barra de progresso, em vez de o componente já desenvolvido em Flash, é que o tamanho do arquivo vai ser muito pequeno.

Veja o resultado:



Configurando os arquivos


No Flash, crie um novo arquivo do ActionScript 3.0, com dimmensions 590x300px e salvar o arquivo como progresso. Nossa barra de progresso irá conter dois MovieClips - pele bar (aquela que você vê por trás) e faixa de pele (o que é arrastável); criá-las como na imagem em anexo, em seguida, fazê-los como um MovieClip novo, chamado percentBar.

Enquanto arrasta, que pretende apresentar em algum lugar o progresso e, em seguida, usar esse valor para se deslocar ou fazer alguma coisa. Para fazer isso precisamos criar uma caixa de informação, onde o percentual será. Basicamente o que você precisa fazer, é criar um MovieClip no palco com novos boxInfo nome da instância, e dentro desta a adicionar um TextField dinâmico, txt chamado.

DraggableProgressBar.as


Crie um novo arquivo de classe do ActionScript 3.0, chamada DraggableProgressBar.as, e declarar todos os MovieClips da barra de progresso como variáveis ​​públicas:
public var trackSkin:MovieClip;
public var barSkin:MovieClip;
public var percent:int = 0;


Como você observa que há uma variável por cento também, que irá armazenar um valor quando o trackSkin MovieClip é arrastado. Na função init nós:
  • definir a barra de progresso como buttonMode;
  • fazer a largura trackSkin a ser 0;
  • adicionar ouvintes quando Mouse é baixo ou para cima;

private function init(e:Event = null):void
{
    removeEventListener(Event.ADDED_TO_STAGE, init);
    trackSkin.width = 0;
    buttonMode = true;
    mouseChildren = false;
 
    addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
    addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
    addEventListener(MouseEvent.MOUSE_OUT, onMouseUp);
}

Quando o mouse está para baixo nós adicionamos um ouvinte enterFrame, então vamos saber o tamanho terá a trackSkin MovieClip depois de arrastar, de acordo com a posição do mouse em X, e quando o mouse está para cima nós removemos a EventListener.
private function onMouseDown(e:MouseEvent):void
{
    addEventListener(Event.ENTER_FRAME, stateBar);
}
 
private function onMouseUp(e:MouseEvent):void
{
    removeEventListener(Event.ENTER_FRAME, stateBar);
}


Vamos ver como a função stateBar olha:
trackSkin.width = Math.min(mouseX, barSkin.width);
percent = (trackSkin.width / barSkin.width) * 100;
dispatchEvent(new Event(Event.COMPLETE));


Primeiro aumentar a linha ou diminuir trackSkin de largura de acordo com mouseX, mas não superiores a largura máxima para ele; segunda linha é a diferença entre a nova escala depois de arrastar e escala máxima multiplicada com 100, a fim de obter um valor de 0 a 100; terceira linha é um despachante para a classe principal, a saber que o percentual é alterado.


Classe principal


Crie um novo arquivo de classe do ActionScript 3.0, chamada Main.as, e declarar todos os MovieClips como variáveis ​​públicas:
public var boxInfo:MovieClip;
public var progressBar:DraggableProgressBar;


Então, nós alinhamos o boxInfo com o ProgressBar na posição X, e adicionar um ouvinte para ler o cento progressBar novo quando é arrastado:
boxInfo.x = progressBar.x;
boxInfo.txt.text = progressBar.percent;
progressBar.addEventListener(Event.COMPLETE, getValue);


Finalmente getValue a função será:
boxInfo.txt.text = progressBar.percent;
boxInfo.x = Math.max(mouseX, Math.min(progressBar.x, progressBar.width));


Salvar este, recompilar e ver se está tudo ok. Se o ProgressBar está pronto, é fácil criar barra de rolagem, uma barra de busca, um volume ou um gráfico de barras também. Deixe-me saber o que você pensa.

Veja o resultado:


draggable_percent_bar.zip

Mais sobre: flash, barra de progresso, arrastavel
Share Tweet
DESTAQUESMais compartilhados
Comentários
  • ASSINE NOSSA NEWSLETTER

    As melhores publicações no
    seu e-mail

  • Preencha para confirmar