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!

Só nos resta deliciar e esperar….

Despois de lançada a Creative Suite 4, que vêm repleta de novidades e muitas delas de se lhe tirar o chapeu, veio anunciar grandes novidades no seu evento MAX, que faz verdadeiramente juz ao nome, de entre as quais está o abandono do Thermo. Não se assustem, passou agora a chamar-se Catalyst e está mais perto que nunca de ter a sua versão oficial lançada.

No Max foi mesmo disponibilizada a sua versão para MAC (humm… ) mas em breve irá ser disponibilizada para windows (esperemos).
Junto com o Adobe Catalyst veio também a versão do Flex Builder 4 que já possui uma versão “oficial” que foi distribuida no evento.

Juntamente com estes aplicativos, foram também lançadas algumas novidades no labs da adobe, como:

• Durango; Uma framework que permite que programadores de flex para a plataforma AIR possam ser personalizados graficamente pelo utilizador final.
• PatchPanel; Não, não é aquele hardware de rede, mas sim uma libraria para o flex que permite aceder a controlos DOM da Creative Suite 4, permite o controlo de simples operações da CS4.
• Alchemy; Mais uma grande noticia, o alchemy permite usar código C e C++ na plataforma Flash.
• Flash Player 10 Pre-Release; A aproximação quase final no Flash Player 10.
• Text Layout Framework; Uma framework que permite trabalhar com texto em multi-lingua usando as possibilidade do novo flash player 10. Introduzindo algumas novidades bem interessantes.
• Cocomo; Uma plataforma / SDK que permite agora juntar capacidades da tão conhecida WEB 2.0 / Redes sociais ao flex/flash com o host no acrobat.com
• Adobe Flash 3 Lite Developper Edition; Permite agora testar aplicações para dispositivos moveis antes de as publicar no dispositivo.
• Adobe Air versões 1.1 para linux e 1.5 para windows disponiveis para download.

E bom, já têm um conjunto enorme de aplicações para testarem, e aqueles que se querem aventurar já poderão encontrar versões para download do Catalyst (apenas MAC) e Flex Builder 4… embora sejam apenas previews do que vêm aí, não devem fugir muito das versões finais.