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:

Player vídeo em Flex

Bom dia pessoal, o meu post de hoje é sobre um recurso simples de ser utilizado e muito poderoso: um player de vídeo em stream com o Flex.
Como sabemos, muitos sites precisam de mostrar algum vídeo para o usuário em algum momento.
O que a maioria faz é disponibilizar um link para download mas você se imagina navegando no Youtube e fazendo download de vídeos assim? Por isso que existe a tecnologia de stream, ela permite que o vídeo seja descarregado e ao mesmo tempo exibido, permitindo maior interatividade com o usuário e maior eficiência na utilização do recurso. O exemplo deste post faz exatamente isso.
A única coisa que você irá precisar além do Flex é de um conversor de avi para flv, no meu caso utilizei o AVI to FLV Converter que pode ser encontrado neste link.

Abaixo o exemplo:



Clique aqui para ver o código fonte.

Agora você também pode fazer o seu YOUTube!
;) Abs

CSS: background repeat?

Com certeza você já deve ter tido esta dúvida: como utilizar repeat-background em um plano de fundo em flex correto? Busquei no Google e como sempre, as melhores soluções que encontrei foi em blogs especializados, de todas as alternativas esta que apresento neste post é a melhor na minha opinião.

Exemplo rodando:

Ainda não consegui utilizar um swf para repetição apenas imagens jpg ou gif, mas quem sabem eu possa melhorar este exemplo e trazê-lo para vocês.

Clique aqui para ver o código fonte.

Extraído de http://labs.flexcoders.nl/?p=16

Até que enfim! Flex Builder para Linux

Puxa, como apanhei tentando rodar o Flex Builder no Ubuntu, acho que foi pelo menos umas 16 horas tentando e nada. Quando rodou perdi a funcionalidade mais importante: o design mode. Hoje ao acessar o blog da DClick li esta notícia maravilhosa, finalmente saiu o Flex Builder Alpha para Linux! A Adobe está realmente indo a sério na tendência do software livre, garantindo maior competitividade para sua ferramenta. Parabéns a todos os Flex Developers, esta é uma notícia excelente!

Links de referência:
http://blog.dclick.com.br/2007/10/03/flex-builder-linux/
http://labs.adobe.com/technologies/flex/flexbuilder_linux/

Resolvendo crash do flex builder

É sempre assim, quando você está mais se divertindo na ferramenta acontece um crash, infelizmente o crash abaixo não é culpa do Flex Builder, mas um problema que ocorre no Eclipse de vez em quando.

Unable to create this part due to an internal error. Reason for the failure: The editor class could not be instantiated. This usually indicates that the editor’s class name was mistyped in plugin.xml.

Encontrei a solução usando o famoso Google, como sempre, daí caí no judahs Blog o qual me indicou que eu apagasse o diretório .metatag do workspace... por incrível que parece é só isso mesmo.

Leitor de RSS em Flex

Este é o exemplo clássico de leitor de rss que já vem com help do flex builder.
Alteramos o exemplo para ler o nosso feed do flex4you. Nosso feed está na url http://flex4you.blogspot.com/feeds/posts/default , apenas alteramos a estrutura do exemplo para se adaptar à estrutura do xml do feed, muito prático e fácil de alteração. ;)

Como é de se esperar, existe um problema de segurança ao realizar-se uma chamada a um servidor externo ao que a aplicação está rodando, por isto estou disponibilizando o fonte de um servlet que serve de proxy, daí a aplicação acessa este proxy em vez da url diretamente.

Link do exemplo

Link do fonte da aplicação de rss.

Link do fonte do servlet e web.xml.

Referência:
http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_16520&sliceId=2

Flex 3D? Web 3.0?

Eu já tinha visto este demo da Outsmart há um mês atrás e ele até agora me impressiona por diversos motivos. Primeiro porque abre precedentes inimagináveis de interação na web e outro porque a performance do exemplo é muito boa. Mesmo utilizando tantas texturas a aplicação dos caras consegue rodar numa boa mesmo em uma conexão que não seja top de linha.
Infelizmente ainda não tenho algum código fonte ou exemplo rodando de algo parecido, mas estou correndo atrás. Espero que consiga desenvolver algo parecido nos próximos meses!
Link da demonstração: Outsmart OS3D Demo