Flash: Como criar um scroll de texto com AS3

Este é um tutorial básico, que irá corresponder a sua criatividade fazendo um scroller rolar alguma coisa em Flash.

Por | @oficinadanet Softwares

Este é um tutorial básico, que irá corresponder a sua criatividade utilizando OOP para rolar alguma coisa em Flash. O que você precisa saber é como preencher o conteúdo em XML e como animar com enterFrame. Se você tiver problemas com os arquivos XML procure algum tutorial que explique como isso funciona.

Veja o resultado:



Configurações de todos os arquivos


Crie um novo ActionScript File e salve-o como "MainClass.as" (com.fladev.scroller.MainClass) - esta será a classe principal para o nosso arquivo flash, o pacote de classes estende a classe Sprite (pois não temos um cronograma de animação). Finalmente, crie um novo arquivo Flash AS3 (590 × 300px) e abri-lo, de modo que temos dois arquivos abertos.


Filme Principal - Main Movie


No filme principal criar um campo de texto dinâmico, com "preloader_txt" nome de instância, em seguida, converter esse símbolo para movieclip e dar-lhe um nome, digamos, "conteúdo". No meu exemplo, isso tem largura 487px e altura 198px; empate em seguida, um retângulo em uma nova camada com a mesma largura e altura, para converter este movieclip e dar-lhe um nome "mask_mc" - esta será a máscara sobre o conteúdo. É importante que estes dois movieclips para ter o mesmo tamanho e coordonates mesmo em X e Y (51,48). O que temos agora é um campo de texto "txt", um movieclip que contêm esse textfield "conteúdo" e uma máscara sobre isso, como um movieclip também chamado de "mask_mc" em uma nova camada. O que nós precisamos terminar isso é criar duas setas de rolagem para cima e para baixo.


Escrevendo o XML




This is a HTML Module</i></font>
This page can have images and formated text all from XML. Just open example.xml, there is no need to recompile.</i></font>

Nunc odio tortor, semper a, rhoncus id, congue eu, purus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas ornare sagittis lectus. Donec convallis aliquam sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus quam est, fringilla non, vehicula sit amet, aliquam ac, nunc. Pellentesque a lectus eu purus bibendum ultrices.]]> </item> </mainNode>



Setas


Flash: Como criar um scroll de texto com AS3

Você não tem que ser um especialista em design para criar duas setas simples - na verdade, você irá criar apenas um, o outro vai ser o mesmo, mas terá um nome diferente. Desenhe um círculo com Oval Tool (O) e uma flecha no meio desta, em seguida, converter este MovieClip com "up_arrow" nome de instância; clone deste e dar outro nome "down_arrow" - agora que estamos a fazer com o filme principal.


Button.as


Crie um novo ActionScript File com o nome "Button.as" (com.fladev.scroller.Button.as), no filme principal, localize na biblioteca onde o botão é movieclip e clique direito sobre ela> propriedades> selecione Exportar para ActionScript. No campo Classe inserir a nova classe criada (com.fladev.scroller.Button) e finalmente clique em OK, isso significa que vamos atribuir uma classe para este botão e não temos para criar outra para cada botão. O código para Button.as é:
package com.fladev.scroller
{
    import flash.display.Sprite;
    public class Button extends Sprite
    {
        public function Button() {
            this.buttonMode = true;
            this.mouseChildren = false;
        }
    }
}


MainClass.as


Declare primeiro algumas variáveis para a velocidade de rolagem e XML:
private static const xmlFile:String = "example.xml"//xml file
private var xml:XML;
private var urlLoader:URLLoader;
private var speed:Number = 5;//scrolling speed


Então, em função do construtor:
public function MainClass() {
    //loading XML file
    urlLoader = new URLLoader();
    urlLoader.load(new URLRequest(xmlFile));
    urlLoader.addEventListener(Event.COMPLETE, showXML);
    //listeners for up and down arrows
    up_arrow.addEventListener(MouseEvent.MOUSE_DOWN, doAction);
    down_arrow.addEventListener(MouseEvent.MOUSE_DOWN, doAction);
    up_arrow.addEventListener(MouseEvent.MOUSE_UP, releaseButton);
    down_arrow.addEventListener(MouseEvent.MOUSE_UP, releaseButton);
    //make the textfield to be aligned at left side
    content.txt.autoSize = TextFieldAutoSize.LEFT;
}


Quando os botões são pressionados a função de seleção para rolar ou não o conteúdo, depende da sua posição:
private function doAction(e:MouseEvent):void
{
    switch(e.currentTarget.name) {
        case "up_arrow":    
            if (content.y < mask_mc.y) {
                content.addEventListener(Event.ENTER_FRAME, goUp);
            }
        break;
        case "down_arrow":
            if ((content.y + content.height) > (mask_mc.y + mask_mc.height)) {
                content.addEventListener(Event.ENTER_FRAME, goDown);
            }
        break;
    }
}


Depois de um botão será lançado nós removemos os ouvintes para a função EnterFrame:
private function releaseButton(e:MouseEvent):void {
    content.removeEventListener(Event.ENTER_FRAME, goUp);
    content.removeEventListener(Event.ENTER_FRAME, goDown);
}


Finalmente, as funções de rolagem para cima e para baixo:
private function goUp(e:Event):void {
    content.y += speed

    if (content.y > mask_mc.y) {
        content.removeEventListener(Event.ENTER_FRAME, goUp);
        trace("fin up");
    }
}
 
private function goDown(e:Event):void {
    content.y -= speed;
 
    if (content.y + content.height+10 <= mask_mc.y + mask_mc.height) {
        content.removeEventListener(Event.ENTER_FRAME, goDown);
        trace("fin down");
    }
}


Você pode alterar a velocidade de rolagem de acordo com a "velocidade" variável. Basicamente, nós rolar o conteúdo usando EnterFrame pela sua posição de acordo com a posição da máscara. Espero que gostem e aprendam alguma coisa, as fontes estão logo abaixo. Boa sorte!

Veja o resultado:


Anexo: simple_scroller.zip

Mais sobre: scroller rolagem flash
Share Tweet
Comentários
Carregar comentários
Destaquesver tudo