quinta-feira, 11 de outubro de 2007

Pré-loader customizado em Flex

O exemplo que trago hoje é um velho conhecido nosso desde os tempos de Flash: o pré-loader customizado. Para quem não se lembra, são aquelas animações que aparecem antes do conteúdo principal da página ser carregado. A principal função de se customizar um loader de aplicação é aumentar o nível de interesse do usuário na ferramenta em que está, seja um site ou sistema corporativo.

Para desenvolver um loader customizado é necessário tomar alguns cuidados. A disposição do layout da página por exemplo, ainda não consegui um loader que cobrisse completamente os componentes e neste exemplo, por ser muito simples isto talvez não ocorra.

O exemplo é dividido entre o código principal, ou seja a tela que se deseja carregar, uma classe actionscript que extende de DownloadProgressBare outra que extende de Loader. A classe WelcomeScreen é que controla a apresentação do swf de animação. Enquanto a página principal é carregada (na realidade um arquivo swf). Os métodos do ciclo de vida podem ser customizados, então se você quiser apresentar mensagens diferentes em estados diferentes também é possível. Geralmente você não precisará alterar o código fonte de CustomPreloader ou de WelcomeScreen, somente a referência para o swf que irá aparecer enquanto a página é carregada.

A indicação que o flex utiliza para saber que você deseja usar um pre-loader customizado ao invés do padrão está na aplicação Flex CustomPreloader no cabeçalho:

preloader="preload.CustomPreloader"

Mais fácil que isto realmente só HelloWorld. ;)
Até a próxima e bom feriado crianças.


Link do exemplo.
Código fonte.

Preview:
id="CustomPreloader" width="549" height="401"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">




width="549" height="401" name="CustomPreloader" align="middle"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">

Um comentário:

Anônimo disse...

Getting a good HD TV has never been easiеr.
Dіscover thе right mοdеl fοг
you аnd your pocκеt with our rеview at http://reviеws.

top-infoгmation.net/samsung-un40eh6000-review/
Feel free to surf my blog post :: stage4kidneydisease.net

by by Spark (sparkbr@sparkbr.com)