O resultado final que comporta um unico ficheiro PSD prontinho a ser usado nas suas aplicações, completamente separado por layers, grupos e muito tem identificado. Com o poder do Flash Catalyst já devem supor que será simplesmente muito facil importa-lo para as vossas aplicações flex…

Segue a preview (cliquem para ver em maior):

Como não foi aprovado, mas no entanto está 100% funcional, ainda estou meio indeciso se o coloco à venda no graphicriver, se o vou utilizar para um futuro cliente ou o disponibilizo gratuitamente aqui no blog para download…

Que dizem?

Abraço.

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?

Neste exemplo podem encontrar alguns detalhes de código que pode ser muito util, como o alinhamento central do blog, algum css (externo), viewstack e linkBar, bem como colocar todas as nossas imagens no flex.

Se contar-mos com o tamanho da framework (cerca de 220 kb) e sabendo que o final da nossa aplicação compilada o tamanho do swf é de 297kb, conseguimos incorporar as imagens no flex, e fazer o seu layout com apenas 77kb de dados e com uma imagem bem original no flex, quase uma skin.

Podem fazer o download do pdf com o tutorial aqui.

Dentro do pdf encontram-se os downloads para o layout.psd (ficheiro de origem do psd com os devidos grupos do layout) bem como o link para o código fonte e visualização online que também podem ver aqui  com o código disponível e umas pequenas alterações.

Aguardam-se opiniões e já agora deixem as vossas experiências gráficas em comentário.

Abraço.

Antes de mais presenteio-vos com o novo layout bem mais limpo que o anterior, com o que realmente é importante em links rapidos e de facil acesso (no topo e lateral), assim fica melhor para todos.

Depois de ter actualizado para o WordPress 2.5 (sim, eu sei que já o deveria ter feito) acabei por encontrar um tema para o WordPress (NeroRossi) que estava quase perfeito para o que eu queria, muito por isso começei a instalar a “tralha toda” e fazer a tradução dos poucos textos que o template tinha para Português, bem como criar um header e um bottom mais “decentes”.

Depois de muitas alterações e personalizações, eis o resultado final!!
Agora só preciso de saber das opiniões por isso votem aí

n

Sei que irá com certeza gerar opiniões muito diversas, por isso deixem em comentário o que acham que está mal e que poderia ser melhorado.

Abraços.