O projecto trata-se de o desenvolvimento de uma plataforma de comunicação visual para apresentação publica em Televisores. Com certeza já passou num aeroporto, hotel, ginásio e viu alguns LCD’s espalhados por lá com as mais diversas informações, principalmente nos aeroportos com as chegadas / partidas, pois então, o projecto focou-se no desenvolvimento de uma plataforma dessas em Adobe AIR (Flex 4) que pudesse facilmente ser administrada pelo cliente, mas também que fosse facilmente personalizada para poder ser distribuída por vários clientes.

O sistema baseou-se me duas aplicações, uma front-end para distribuição pelos clientes, apenas com controlo de chaves (Numero de série gerado pela administração) e que carregará toda uma playlist de vários módulos, bem como toda a skin (cores e logo). A segunda aplicação consiste numa area administrativa onde o cliente pode gerir a sua playlist, noticias, videos, animações, aniversariantes, noticias manuais, etc’s. Esta area administrativa também permite no caso do login de Super Administrador de gerir todos os clientes, skins e restantes informações.

As playlists são ilimitadas, pelo que podem criar uma playlist completa para o dia!

Todo o sistema do cliente, ao abrir-se  (na primeira apresentação pede a chave da aplicação) carrega todas as informações do servidor; Skin, playlist e logotipo e adapta-se em fullscreen ao ecrã. Dá-se então inicio ao processo de carregamento da playlists e seus elementos. Esta palylist consiste na apresentação de variados modulos e respectivas durações de apresentações.  (Vejam as imagens mais em baixo…)

Os módulos desenvolvidos foram os seguintes:

• Noticias; Vários modulos de noticias de varias categorias, quer com fonte num Feed RSS  ou na base de dados (Inserção manual). Categorias: Actualidade, Mundo, economia, tecnologia, inovação, desporto, cultura, saúde, país.
• Tempo; Previsão de tempo para o dia e próximos 3 dias com a possibilidade de 1 ou mais locais na area central, e com os display das temperaturas para todas as grandes cidades no topo;
• Informação financeira; Bolsa de valores (cotações em tempo real) e Cambios.
• Aniversariantes; Possibilidade de apresentar aniversariantes e suas fotos /departamentos na area central para os próximos 7 dias.
• Animações / Publicidade; Possibilidade de colocar animações em formato SWF para display apenas na area central ou em fullscreen.
• Videos / Publicidade; Apresentação de videos em streamming na area central ou em fullscreen.

As noticias na area central podem conter também fotografias vindas de um feed RSS ou da base de dados. A playlist pode ser organizada com varios destes elementos / módulos, e facilmente gerida via “drag&drop”.  O sistema ficou preparado para a qualquer hora poder criar um novo módulo e integra-lo na playlist; Novos módulos se adivinham como conferências, dicas, publicidade, classificações de jogos, programação de canais de televisão, etc’s…

O sistema ainda conta com auto-update para se actualizar sem necessidade de intervenção do administrador, tal como a própria aplicação procura actualizações de noticias, skins, imagens, videos, playlist de 15 em 15 minutos para que desta forma apresentar sempre conteúdo actualizado.

Se eu ao inicio tinha algumas duvidas se o consumo de memória e processador da aplicação no PC do cliente poderia depois de uma longa utilização entrar num ponto crítico, essas duvidas foram desaparecendo depois de alguns dias de testes, que surpreendemente revelaram que o consumo de memória se mantinha praticamente o mesmo (em alguns casos mais baixo que o inicial) e que o consumo de processador apenas era mais elevado a quando do carregamento de videos em streamming.

Tecnologias usadas:

O pricipal “motor” do front-end e da skin foi o Adobe Illustrator que permitiu converter elementos vectoriais do corel draw facilmente para o Flash Builder, claro sempre com a ajuda preciosa do Flash Catalyst. Depois disto foi criar a skin no Flash Builder, definir os elementos, configurar as diferentes skins dos módulos e juntar tudo num só componente MXML.

A partir daí o Flex encarrega-se de fazer o resto, usando so módulos necessários e ajustando a skin conforme as necessidades. A parte mais fantastica é que ao usar PATH’s (FXG) a skin faz o auto-resize sem perder qualidade e toda ela pode facilmente mudar de cor, o que permitiu criar diferentes skins configuradas no backend.

Foi usado o ZendAMF (PHP) + MySQL como backend para gestão de dados.

As informações de noticias são vindas quer da base de dados quer de varios feeds (que podem também ser alterados facilmente no backend), já as informações meterológicas para todas as cidades são do google e as financeiras (bolsa e cambios) do yahoo.

Penso que é tudo, aqui fica mais uma prova que o Flex pode também servir para aplicações variadas, tal como esta. Como a própria aplicação está em adobe AIR, provavelmente num futuro próximo ela pode ser migrada para as próprias Televisões “Internet” com o sistema operativo Android, abolindo a necessidade de um PC para o trabalho

Abraço!

Deixo-vos com algumas imagens (Partes das areas foram ocultadas, como o logotipo e imagens dos aniversariantes para preservar os clientes).

Bem, depois de algum tempo a explorar as novas ferramentas da adobe, decidi começar por falar do Flash Catalyst.
Antes de mais devo confessar que apesar de ter o vicio do desenvolvimento em AS3 / Flex também tenho um grande gosto a nivel visual e gráfico, sendo que parece que o flash catalyst foi feito para mim.

A nivel visual o Flash Catalyst está muito bem conseguido, com uma ambiente simples, distribui muito bem todas as grandes “ares” de trabalho, dando enfase ao que realmente interessa. Estas areas principais são 4 + 1, falo assim porque existem 4 areas bem definidas e um quinto painel que curiosamente não têm nome, o qual apelidei carinhosamente de painel mágico. Mais à frente explico porque.

A primeira area é destinada aos “States“, sim, se não gostam muito de states (como eu) vão ter que se habituar (também como eu). Nesta area encontramos inicialmente apenas um state, ou seja, o stage principal. Aqui poderemos adicionar mais estados à nossa aplicação, criando um cópia do primeiro ou então criando um state novo. Imagine, teriamos por exemplo no primeiro state um login, no segundo a parte de visualização, no terceiro a parte de modificação.. enfim, tratam-se como se fossem “paginas”, tal como no flex builder já era possivel fazer.

A segunda area é o nosso palco principal (Stage), onde podemos adicionar alguns elementos/componentes ou importar graficos do photoshop ou ilustrador. Aqui pouco há a explicar, trata-se de uma parte ambiente tal como o Flash CS4.

A terceira parte é talvez uma das que mais complicações pode trazer, mas na realidade é muito facil de usar. Trata-se de uma Timeline, onde ao contrario do flash não está dividida em frames, mas sim (e desta feita, faz juz ao nome) dividida em espaços de tempo, o que nos indica com exactidão o tempo. Se colocarem 2 states no vosso projecto, esta será a area onde se podem animar as transições de um state para o outro e vice versa. Aqui podemos também definir transições individuais de determinados componentes de ambos os States, por exemplo animar unicamente uma datalist de um state para o outro.

Podemos aqui adicionar alguns efeitos basicos, como fade, resize, um novo efeito (do engine 3d do flash), o Rotate 3D. Apenas são permitidos muito poucos efeitos, afinal… serve apenas para indicar ao programador +- o que há a fazer.
Uma das grande caracteristicas deste painel é a possibilidade de ver estes efeitos em tempo real sem ter que abandonar o FC ou abrir um browser. Isto sim é uma grande novidade.

Na lateral direita do Flash Catalyst (por defeito) podem encontrar a quarta area, onde estão visiveis os paineis de elementos, de entre eles:

O painel Tools, onde podem encontrar elementos graficos simples, como shapes ou texto prontos a serem usado no nosso layout.
O painel Layers, onde (no caso de importarem um layout do photoshop ou do Illustrador) podem encontrar a a mesma função de layers presente no Ilustrador ou Photoshop.
O painel Componentes, onde encontram alguns componentes nativos do flex, e que podem ser usado no FC. Ao lado encontram um segundo painel onde podem encontrar todos os componentes que estão em uso no noso layout. Se não tivermos ainda inserido ou transformando qualquer componente no nosso layout este painel estará vazio. No caso de possuirem alguma datalist (aka datagrid) no layout com algum repeater (row/linhas), também poderão encontrar aqui um “gerador” de dados de exemplo, para poderem ver em tempo real os dados na dataList.
O painel Propriedades (Properties), onde ao clicarem em algum componente encontrarão as propriedades do mesmo, sendo que apenas funciona para elementos nativos ou transformados do flex, como buttons, datalist, textinput…

Por final, o painel magico… sim, aquele que permite dar vida ao nosso layout! Aquele painel em preto!

Alem de muitas coisas permite converter qualquer elemento visual em botão, datalist, scrollbar, textinput, e além disso, ao clickar em cima de um elemento transformado podemos ainda ter acesso às “parts” do mesmo, sendo possivel editar os “states” da mesma, como o caso de um botão: Over, Out, Down, Disabled ou no caso de um textInput: Enabled, Disabled. Além do mais permite associar acções a estes elementos, como tal permite que um botão possa imediatamente efectuar a transição feita por nós no painel “Timeline”. Pemite também a associação de acções a eventos como MouseOver, mouseOut, Focus…

Finalmente, tudo que o nós fazemos no stage, desde a hora de importação de um layout até à transformação de texto em componente é criado a nivel visual, mas o seu código MXML é gerado automaticamente, sendo que se clicarem no combobox que encontram na lateral direita no too, podem ver o proprio projecto pronto-a-usar no flash builder, bem como todos os componentes, assets, etc’s…

De notar que o código pode parecer muito estranho aos olhos de um utilizador do Flex Builder, e é para ser assim mesmo… na maior parte dos casos o código usado é pretencente ao FLEX 4 e podemos encontrar aqui dezenas de novidades, principalmente ligadas ao padrão gráfico FXG e novos namespaces introduzidos no Flex 4.

E bom, está dado por terminado a primeira introdução ao Flash Catalyst, que apesar de ser um aplicativo completamente novo e que veio para ficar, devo dizer que deixou um pouco a desejar, principalmente em alguns aspectos;
Não possui todos os elementos gráficos do Flash Builder, nem é possivel transformar elementos tão simples como um checkbox, ou combobox. Existem muito poucos efeitos nativos aplicáveis às transições, a nivel de componentes também não estão disponiveis todos do Flash Builder e por final, o painel propriedades não apresenta assim tantas propriedades dos componentes como o proprio nome diz… de resto, o código… o código gerado pode-se tornar um grande dor de cabeça para quem não conhece o flex 4 ou está habituado a organização diferente… mas com o habito vai lá!

Enfim, como nota final, não nos podemos esquecer que é apenas uma versão beta e vamos esperar que a versão final venha bem mais completa. Mas mesmo assim já posso afirmar que é uma poderosa aplicação, e nos primeiros ensaios posso dizer que já satisfaz bem muitas das necessidades visuais que eram dificilmente implantadas no Flex Builder.

Vem com certeza revolucionar o mercado das Rias, aproximar os designers dos developers, mas também vai fazer com que apareçam aplicações francamente “mal programadas” mas também visualmente arrebatadoras! Vamos esperar para ver!

E vocês, que pensam vocês?

Uma imagem vale mais do que mil palavras, (sim, os meu OS está em françês :=) ) pois é… o titulo já está gasto “Flash Builder 4 e Flash Catalyst disponiveis pra download” por isso uma forma diferente de anunciar a todos que a adobe acaba de dar mais um passo de gigante no mercado das RIA’s, desta vez não só dedicado ao amantes do flex, mas sim aos seguidores do flash, tanto designers como programadores, e agora sim, podemos alcançar aqueles layouts de sonho facilmente. Ou pelo menos é o que se espera. 

Ainda à 2 dias tinha vindo expecular a possivel brevidade destes downloads, e voilá! Como o Mário Junior disse… estava mesmo pra mais breve do que pensava!
Foi então hoje que a adobe mudou a forma como se olham as RIA’s, lançando as versões do Flash Builder 4 (antigo Flex Builder), o Flash Catalyst e o SDK do flex 4 (aka Gumbo).

Desta forma, acabei de instalar ambos, o flash builder pode ser instalado juntamente com a versão 3 do flex builder, não necessitando de o desinstalar. Quanto aos mais cépticos, o flash builder 4 propoe-se a abrir e executar todos os projectos do flex builder 2 e 3, mas uma vez alterados no flash builder 4 estes não funcionarão mais na versão 2/3.

Posso adivinhar que traz muitas novidades, e ainda vou perder muito tempo a rever e encontrar novas funcionalidades, mas também estou céptico quanto à demasiada facilidade que o catalyst veio trazer, o que pode indicar a entrada de designer pro mercado das ria’s, será isto uma vantagem? ou talvez não… com o tempo veremos.

Quanto à revolução… começou agora! (acho!)
Quanto a mim! bem… esperem novidades no blog, farei uma pequena analise de ambos os produtos..

Abraço e go labs, go!

Pra breve?!? Não sei se será o termo, ainda ontem estava a discutir algumas ideias com o Fabio Vedovelli sobre a grande “discussão” que anda por aí onde toda a gente discorda com alguns pontos tomados na escolha do estilo de programação do flex 4 a nivel de MXML. Mas bom, no meio dessa conversa acabamos por referir que era estranhissimo a adobe não dar noticias sobre as datas da primeira beta de ambos os produtos… enfim… ninguém sabe bem o porque de demorar tanto, mas temos que nos habituar a isso.. muito provavelmente estão a melhorar muitos pontos de cruzamento das duas aplicações… (ah, pra quem não sabe o flex builder passará a chamar-se flash builder).

Mas hoje, vi um “estranho” anuncio, um evento “[Flash Builder 4 / Flash Catalyst] (Beta) Launch” do Ottawa Flash Platform User Group onde é indicado o Lauch tour, indicando que se aproxima pra breve a distribuição da primeira beta de ambos os produtos… será?

Eu continuo a achar que não será assim pra tão breve, mas por este titulo fico até na esperança… (em muitos lugares, incluindo nos blogs da adobe, foi anunciado uma primeira beta para o meio deste ano.. junho, certo? ) embora ache que só lá pra outubro será verdadeiramente distribuida no labs da adobe a quando do MAX LA/CAlifornia.

No então…. fiquemos no aguardo… e vocês? que acham disto tudo?

Só nos resta deliciar e esperar….