[Classe] PreloaderObserver

[brunobispo 20]

No meu último trabalho, eu desenvolvi uma classe para facilitar a construção de preloaders no Flash. Ela acaba sendo mais útil em casos que precisamos informar um "carregamento geral" de vários arquivos simultaneamente, mas ainda pode ajudar o pessoal que tem dificuldade com o carregamento normal também. No meu caso, eu precisava carregar um SWF e seu respectivo conteúdo XML para só então exibir a página.

 

Nesse exemplo, o preloader está na biblioteca com a opção Exportar para ActionScript habilitada extendendo a classe PreloaderObserver. Em sua classe, ele substitui o método protegido _refreshDisplay() que é chamado sempre que há a necessidade de alterar o status do preloader.

package
{
    import com.brunobispo.display.PreloaderObserver;
 
    import flash.display.MovieClip;
 
    public class MyPreloader extends PreloaderObserver
    {
        public var barra:MovieClip;
 
        public function MyPreloader()
        {
            barra.scaleX = 0;
        }
 
        override protected function _refreshDisplay():void
        {
            barra.scaleX = bytesLoaded / bytesTotal;
        }
    }
}

No filme principal, o preloader é adicionado ao palco e utilizado da seguinte forma:

package
{
    import flash.display.Sprite;
    import flash.display.Loader;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    import flash.text.TextField;
    import flash.events.Event;
 
    public class PreloaderExemplo extends Sprite
    {
        public var preloader:MyPreloader;
 
        private var _loader1:Loader = new Loader();
        private var _loader2:Loader = new Loader();
        private var _urlLoader:URLLoader = new URLLoader();
        private var _textField:TextField = new TextField();
 
        public function PreloaderExemplo()
        {
            _loader1.x = 30;
            _loader1.y = 30;
            _loader1.load(new URLRequest('arara1.jpg'));
            addChild(_loader1);
 
            _loader2.x = 60;
            _loader2.y = 60;
            _loader2.load(new URLRequest('arara2.jpg'));
            addChild(_loader2);
 
            _textField.x = 90;
            _textField.y = 90;
            _textField.width = 300;
            _textField.height = 100;
            _textField.background = true;
            _textField.wordWrap = true;
            _urlLoader.load(new URLRequest('xml_exemplo.xml'));
            addChild(_textField);
 
            preloader.attach(_loader1.contentLoaderInfo);
            preloader.attach(_loader2.contentLoaderInfo);
            preloader.attach(_urlLoader);
            preloader.start();
            preloader.addEventListener(Event.COMPLETE, _preloaderCompleteHandler);
        }
 
        private function _preloaderCompleteHandler(e:Event):void
        {
            _textField.htmlText = XML(_urlLoader.data).p.toXMLString();
        }
    }
}

Para o pessoal que ainda está aprendendo, segue o exemplo desse post para download. O download da classe PreloaderObserver também está logo abaixo.

• Exemplo
• Classe PreloaderObserver

Para ver a fonte com o exemplo incorporado, acesse http://brunobispo.com/classe-preloaderobserver/

[Elektra 102]

Muito obrigada brunobispo http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

 

 

Code todo comentado e ainda 'fla + arquivos', melhor impossível. Adorei.

 

Realmente muito útil, é um curso sobre algo específico.

 

 

 

Abraços http://forum.imasters.com.br/public/style_emoticons/default/worshippy.gif

 

 

 

* talvez possa considerar nossos colegas que não dispõe da versão CS5, para quem está aprendendo visualizar o arquivo faz toda a diferença.

[brunobispo 20]

Muito obrigada brunobispo http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

 

 

Code todo comentado e ainda 'fla + arquivos', melhor impossível. Adorei.

 

Realmente muito útil, é um curso sobre algo específico.

 

 

 

Abraços http://forum.imasters.com.br/public/style_emoticons/default/worshippy.gif

 

 

 

* talvez possa considerar nossos colegas que não dispõe da versão CS5, para quem está aprendendo visualizar o arquivo faz toda a diferença.

 

Obrigado por ter me avisado, Elektra. Eu nem tinha me ligado nesse detalhe. Já atualizei o arquivo para a versão CS4.

[Matheus Brito 12]

Opa Bruno otima classe, parabéns.

Só uma observações poste o conteúdo aqui na integra, pois somente o link não é permitido.

 

Agora falando sobre o design pattern, eu ja usei o observer, é interessante mesmo e supre a deficiência do MVC. Agora uma coisa que tipo começei a fazer depois de implementar a observer, foi utilizar o ciclo de eventos pra avisar as mudanças.

 

Abs

[Elektra 102]

Você vale ouro Bruno.

 

Merece meu carinho e respeito.

 

 

Estou com o CS4 e CS5 instalado, se algum colega precisar na versão CS3, estou à sua disposição.

[brunobispo 20]

Opa Bruno otima classe, parabéns.

Só uma observações poste o conteúdo aqui na integra, pois somente o link não é permitido.

 

Agora falando sobre o design pattern, eu ja usei o observer, é interessante mesmo e supre a deficiência do MVC. Agora uma coisa que tipo começei a fazer depois de implementar a observer, foi utilizar o ciclo de eventos pra avisar as mudanças.

 

Abs

 

Obrigado, Matheus. Eu optei por postar um link porque o forum não permite mais que se altere o conteúdo depois de um intervalo. Assim fica complicado se em algum momento eu precisar corrigir o conteúdo.

 

Colocar o conteúdo aqui é realmente uma exigência?

[Elektra 102]

Não há nenhuma regra explícita para postagem de tutoriais, fui conferir isso, e há outro em igual situação.

Foi no acaso, o assunto me interessou.

 

Acho difícil que nenhum dos moderadores ou admins tenham visto e deixado passar sem ao menos postar uma observação.

 

Aqui o link do tutorial >> Clique aqui

 

Print >> Clique aqui

[Mário Monteiro 179]

Não é uma regra mas é uma boa pratica já que caso o conteúdo original saia do ar por algum motivo este tópico não necessariamente teria que ser excluído pois teria conteúdo

[Elektra 102]

Bruno no exemplo você usa 2 imagens para o carregamento e mantém a barra/preloader visível.

 

 

Estou considerando o uso para páginas, então gostaria de perguntar:

 

 

O swf com a barra de carregamento corresponde a 'index.swf', 'arara1.jpg' como a 'main.swf' (recebe o menu), e 'arara2.jpg' como a 'home.swf' (conteúdo).

 

Penso em após completar o carregamento usar uma Tween para desaparecer a barra e depois exibir a página inicial .

 

Nesse caso devo informar a Tween na função COMPLETE, altera algo no code atual para o carregamento dos arquivos externos (main + home)?

 

A 'index' também poderia ser removida, uma vez a classe para acessar os itens do menu e o preloader intermediário se acham vinculadas a 'main'.

 

 

 

Desculpe tantas perguntas, estou pensando na forma mais simples para quem está começando e ainda não sabe trabalhar com muitas classes.

 

 

 

Abraços