Flash Catalyst; Primeira abordagem.

Flash Catalyst; Primeira abordagem.

flash catalyst

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.
fcat_1

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!

fcat_2

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…

fcat_3
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?


9 comments

add yours
  • Gustavo Guichard June 15, 2009

    Eu penso que vai ser uma ótima ferramenta! Mas está apenas nascendo… os outros programas da Adobe já tem diversas versões e a Adobe é uma empresa que ouve os usuários, então, vai amadurecer com certeza e vai FICAR!
    Senti falta também da maioria dos componentes do Flex, de easing nas animações, da ferramenta: Hand Tool e muitas outras coisas que espero que sejam corrigidas até a versão final ou nas próximas versões… Mas com certeza é uma carta que vou levar na minha manga!!

    Ah… só pra complementar: O nome do “Painel Mágico” é HUB segundo os evangelistas da Adobe em seus vídeos.

  • Ramon Fritsch June 16, 2009

    Ótimo post :D

    Está linkado.

  • Robson Costa June 19, 2009

    Olá!
    Mário Santos!
    Primeiro gostaria de te agradecer pelos tutoriais que são excelentes!
    e em segundo lugar gostaria da sua opnião e de outros que puderem me esclarecer uma dúvida.

    eu ja programo em PHP
    e fiz um curso de Flash, mas que não valeu muito coisa.
    sempre ouvia falar no Flex mas não sabia nem exatamente oque era essa ferramenta. e poucas pessoas da área de programação que eu conhecia, sabiam pelo menos explicar ao certo.
    Foi quando resolvi correr atras para tentar entender melhor e descobri o seu SITE.
    cara foi de grande ajuda!

    baixei o Tutorial “Aprendendo Flex apartir do Zero”
    e comecei a estudar… confesso que no começo foi fácil mas a medida que fui avençando surgiram várias dúvidas que ainda não consegui esclarecer, porém continuo tentando.

    Mas a questão é: e agora que foi lançado o Flash Catalyst? (que eu entendo menos ainda)
    oque eu devo fazer? devo me dedicar a conhecer essa nova ferramenta e deixar de lado o Flex?
    vale apena eu continuar estudando no flex sendo que a evolução da ferramente fez com que ela se modificasse completamente?

    não sei oque fazer…

  • Mário Santos June 19, 2009

    Oi Robson,
    Primeiro de tudo obrigado pelas palavras, quanto às duvidas use o forum aqui do blog:
    http://forum.msdevstudio.com

    Quanto ao Flash catalyst não terá que aprender nada, ele serve apenas para a camada grafica, muito util na hora de passar um layout pro flex, mas dedique-lhe uma vista de olhos…

    Agora quanto ao Flash Builder 4 + Flex 4 as coisas são muito diferentes, a arquitectura mudou completamente e ai sim deve dedicar bastante tempo até porque quer no Flash Catalyst quer no flash builder ambos trabalham com o flex 4.

    Em breve espero poder iniciar uma serie de tutoriais sobre o flex 4, mas entretanto dê uma vista de olhos nele e no Flash Builder 4.

    Cumprimentos.

  • Robson Costa June 22, 2009

    Agora que eu entendi!

    o Flex ainda continua! a diferença é que agora vai passar a se chamar Flash Builder 4
    e o Flash Catalyst é outra coisa!

    entendi!
    eu tava pensando que o Flex Builder tinha acabado e apartir de agora seria Flash Catalyst!
    poxa que burro né? mas enfim, pior seria se eu não tivesse perguntado!
    valeu Marcio! vou continuar estudando!

  • Samy September 30, 2009

    Quando veremos um tutorial de flash catalyst?

  • Mário Santos October 1, 2009

    Em breve… espero :)

  • Eliéser Souza November 1, 2009

    Olá Mário, estou iniciando os estudos em Flex e AS3, e para isso tenho utilizado seus tutoriais, que por sinal são muito bons.. (parabéns pela iniciativa), porém queria saber é o seguinte, agora com a mudança do Flex para Flash Builder continua sendo interessante eu dedicar esforços para aprender o Flex 3 ou e deveria partir logo para o Flash Builder? E se você conhece algum lugar onde posso encontrar material de estudo para o Flash Builder além do site da adobe?

  • Itarcio January 8, 2010

    O Flash Catalyst vai ser bastante útil para web designers e designers que tem dificuldades em programação, como eu. Já vi uma palestra sobre ele de um grande profissional, e fiquei bastante esperançoso. Continuarei os estudos da faculdade em programação, claro, mas confesso que o Catalyst me seduziu. É quase tudo que um designer queria, sem dúvida, ótimo programa.

Leave a Comment

Post