Olá caros leitores, infelizmente tenho andado meio afastado do blog devido a algumas mudanças na vida profissional, mas também por falta de tempo. Mas bom, hoje venho falar de um projecto que elaborei antes desta mudança profissional, e que foi bem interessante não só a nivel tecnológico, mas também a nivel funcional.

O seu nome é SIGCOND, um sistema de gestão de condomínios muito completo. Todo o sistema foi elaborado em Adobe Flex 4, com recurso ao ZendFramework, MySql e PHP mas não se limitou a estas tecnologias, já que também conta com um sistema interno de chat / conferencia feito com recurso ao Red5 Media Server / Java. Conta com variadas áreas, 4 niveis de utilização: Super Administrador, Administrador de Condomínio Master, Administrador de condomínio e Condómino. Cada um deles apenas pode aceder a algumas funções e menus da aplicação devido a um sistema de UAC implementado.

Foram também integradas algumas API’s que tornam a aplicação muito funcional, de entre as quais:

• Google Charts API, permitindo assim criar relatórios de consultas com gráficos tornando os relatórios bem mais agradaveis.
• Clickatell SMS API, permite que o sistema possa enviar notificações por SMS para os telefones dos condóminios e administradores, tornando a troca de informação mais directa entre os administradores e o sistema. Esta API é implementada de uma forma totalmente automática, já que as notificações sao apenas configuradas (activas/inactivas) e o sistema encarrega-se de enviar as devidas notificações consoante várias operações iniciadas por parte do utilizador, ou automaticamente por parte do sistema. Estas notificações incluem falta de pagamentos, agendamentos, notas, reuniões de condomínios, lançamento de quotas / facturas, etc.
• EasyPay – Gateway MB. Esta API torna o sistema ainda mais funcional, permitindo o lançamento em tempo real de Facturas com uma referencia MB / Home-banking que imediatamente fica disponível para pagamento. Sendo que os administradores podem pagar o aluguer da plataforma e os condóminos as suas quotas / facturas sem sair de casa. Assim que o cliente/condómino paga a factura numa caixa electrónica, ponto de pagamento ou home-banking o sistema é de imediato notificado e efectua o fecho do registo a pagamento.

© msdevweb for TSW – That Should Work Blog, 2011. | Permalink |No comment | Add to del.icio.us

Post tags: as3, condominios, condominos, Flex, gestão, java, red5, sigcond

Olá pessoal, nesse breve artigo eu irei falar um pouco sobre as Metadata Tags.

[Importante]
A partir da versão 4.5 do flex as Metadatas customizadas não precisam ser declaradas para o compilador nos projetos Flex, o conhecido “-keep-as3-metadata”, quem trabalha com Frameworks de terceiros entende bastante isso.

Notei na nova versão do Swiz Framework que existe também uma complementação do código para metadatas personalizadas como “Inject e EventHandler”. Depois de vasculhar os fontes do Swiz Framework encontrei o arquivo metadata.xml que é o responsável pela declaração de todas essas metadatas.

Se você está criando uma biblioteca que possui suas próprias metadatas e deseja criar uma complementação do código, basta seguir os passos da documentação da própria Adobe, é bem simples.

Esse é um exemplo desse arquivo de configuração.

Você pode se basear pelo arquivo do próprio framework do flex. Fica na pasta: sdks4.5.0frameworksmetadata.xml

Espero que a informação tenha sido útil.

Abaixo seguem alguns links interessantes relacionados ao assunto.

• About metadata tags
• Metadatas Personalizadas (Flex 3 e Flex 4)
• Code completion for custom metadata tags

O Adobe Air está cada vez mais evoluido, e no decorrer de um projeto que estou envolvido foi necessário criar uma area na minha aplicação que aceitasse o drag-n-drop de uma pasta da maquina do utilizador e que adicionasse os ficheiros que esta pode ter dentro. Nem todos os ficheiros seriam adicionados, apenas os ficheiros com as extensões que eu seriam apresentados na minha lista.

Bom, esta é uma questão que muita gente têm, como ler recursivamente o conteudo de uma pasta da maquina do utilizador?

Pois então, a solução é bem simples, segue o exemplo (não vou mostrar como fazer o drag-n-drop, mas apenas como lidar com a pasta que foi largada na nossa aplicação)

Na função onDrop, vamos buscar o arquivo (uma pasta é considerada como arquivo tambem) da area de “transferência” do evento(clipboard), para isso fazemos:

onde o ‘evento’, é o nosso evento? NativeDragEvent disparado pela area que recebeu o drop do arquivo/pasta.

Vamos agora buscar o arquivo e fazer o seu cast como File:

Temos então o File que pode conter um arquivo individual ou então uma pasta, vamos então identificar qual deles é:(…)
Leia o resto de Dica Adobe Air – Drag & Drop Ficheiros + Pastas (129 palavras)

© msdevweb for TSW – That Should Work Blog, 2011. | Permalink |No comment | Add to del.icio.us

Post tags: Air, arquivos, as3, Desktop, dra-n-drop, drag & drop, ficheiros, folders, pastas, Tutorial

Olá fieis leitores!!

Imagem: pt.fotolia.com

Deve ter reparado que tenho andado meio ausente, deve-se ao facto de andar com bastante trabalho e da minha pequena Luana estar cada vez mais crescida e não fica quieta Mas bom, não se pode ter tudo não é verdade??! Ela é Linda!!

Bom, venho aqui escrever este artigo devido a uma dúvida que me foi colocada no fórum (http://forum.msdevstudio.com) onde me era perguntado como implementar uma encriptação 512 bits usando a conhecida libraria as3crypto. (http://code.google.com/p/as3crypto/)

Apesar de achar esta libraria bem completa, também a acho demasiado complicada.. foi por isso que quando pensei em implementar uma solução destas no passado andei ? procura de uma outra solução que não fizesse apenas a encriptação em Flex/As3, mas também que a mesma string pudesse ser desencriptada no PHP. Encontrei depois de algumas pesquisas uma implementação super interessante no blog (http://www.lostinactionscript.com) que faz precisamente isto. Ecriptação AES duas vias (Flex<->PHP) e posso afirmar que até hoje não encontrei qualquer problema usando este mesmo método, apesar de ter que usar uma biblioteca diferente no php.

No fórum, perguntavam-me como implementar encriptação 512 bits (não enumerava qual o algoritmo, no entanto sugeri o AES 256). Na minha humilde opinião, uma encriptação AES usando ? 256 bits é mais que suficiente visto que, caso não saibam, o AES é dos algoritmos mais seguros do mundo e que se bem implementado com as devidas preocupações com chaves, é teoricamente impossível de desencriptar. Este algoritmo é largamente conhecido e até usado para encriptar dados de documentos do Governo dos Estados Unidos.

Esta implementação no flex e no php é bem simples, basta fazerem o download do arquivo usado no site lostinactionscript.com (download aqui) e no nele (.zip) encontram a class/caminho: ? AES/com/lia/crypto/AES.as. Esta class será a que vamos usar no Flex, para isso criem a mesma estrutura de pastas no vosso projeto flex e copiem esta class para lá. (com/lia/crypto/Aes.as).

No php, as classes para download podem ser encontradas aqui: http://www.movable-type.co.uk/scripts/aes-php.html (Devem criar dois ficheiros .php com o conteúdo apresentado nesse artigo. AesCtr.php e Aes.php)

Depois disto, basta no flex usar:

protected function encripta() :void

var stringEncriptada:String = AES.encrypt(“Texto a encriptar”, “chave”, 256); //Usamos 256bits

E no php para desencriptar:

function desencripta()

$stringDesencriptada = AesCtr::decrypt($stringEncriptada,”chave”, 256);

Para o processo inverso (encriptar no php e desencriptar no flex), temos no PHP:

function encripta()

$stringEncriptada = AesCtr::encrypt(“Texto a encriptar”,”chave”,256);

e no Flex:

protected function desencripta():void

var stringDesencriptada:String = AES.decrypt(stringEncriptada, “chave”, 256);

E pronto, temos o nosso sistema para encriptação / desencriptação em ambos os sentidos. Torna-se muito util quando têm que passar dados mais sensí­veis via AMF (zend, amfphp. weborb) já que ao enviar os dados cifrados tornasse muito mais seguro. Fica o aviso, este algoritmo é seguro o suficiente para grande partes das necessidades, mas não esqueça de usar uma chave segura visto que a segurança depende sempre da implementação. Não é o algoritmo que têm falhas, nós que que as causamos!

Bom, espero que tenha seja util nos vossos projetos.

Abraço.

© msdevweb for TSW – That Should Work Blog, 2011. | Permalink |No comment | Add to del.icio.us

Post tags: AES 256, as3, cifrados, crypto, PHP, protecção

Esta é uma tradução do seguinte artigo: 10 Things A Good Flex Developer Should Know

Para ser um bom programador Flex é preciso mais que simplesmente saber como usar alguns componentes nativos do Flex. É preciso muito mais.

Aqui está minha contribuição sobre o assunto… juntamente com alguns recursos ou algumas palavras-chave que você poderá pesquisar facilmente através do Google.

Por favor, comente no blog se você achar que esqueci algo (o que é inevitável) ou se quiser sugerir alguns recursos interessantes que devo acrescentar.

1- Programação orientada a Objetos (OO)

O Flex se baseia na linguagem ActionScript3, que é totalmente orientada a objetos. Embora não seja um conceito fácil de aprender, programação orientada a objeto é um pré-requisito para aprender Flex. Se já possui experiência com OO (Java, C#, Ruby, etc), então você está pronto. Se não, você precisará pegar um livro sobre OO e começar a aprender o mais rápido possível.

· Head First Java (Java? Sim, Eu sei. Mas confie em mim.)

· Object-oriented programming with ActionScript 3.0

Nota: Alguns de vocês poderão perguntar – “O que são padrões de projetos?”. Vamos dar um passo de cada vez? Preocupe-se em entender classes e objetos, interfaces, herança, composição, polimorfismo, encapsulamento, etc. Só então considere estudar padrões de projetos. De fato, se eu escrever um post intitulado “10 coisas que um GRANDE programador Flex deve saber”, padrões de projeto estará nessa lista.

2- ActionScript/MXML

ActionScript é a linguagem de programação usada juntamente com MXML para criar aplicações Flex. MXML é uma linguagem de marcação baseada em XML. Cada tag MXML é mapeada diretamente para uma classe ActionScript correspondente. MXML é usado pelos desenvolvedores Flex principalmente para apresentar a interface do usuário, enquanto que, o ActionScript é usado para a lógica de negócio. Com exceções, é claro.

O Framework Flex inclui centenas de classes ActionScript e interfaces usadas para desenvolver aplicações Flex. Seu nível de habilidade como um desenvolvedor Flex está diretamente ligado ao seu conhecimento em relação ao ActionScript e MXML.

· Flex in a Week

· Tour De Flex

· Essential ActionScript 3.0

Nota: Fique ? vontade com a API do Flex. Como um desenvolvedor Flex, você vai usá-la diariamente.

3- Debugging

Boa parte do tempo de qualquer programador é gasto no debugging. Obviamente, é necessário debugar para rastrear a causa de bugs. No entanto, também é uma ótima maneira de conhecer o código fonte.

Felizmente, existem muitas ferramentas disponíveis para ajudá-lo com o trabalho de debugging. Invista algum tempo para aprender essas ferramentas. Seu investimento irá proporcionar retorno imediato.

· Flash Builder 4.5 Debugger

· De MonsterDebugger

· Kap Inspect

4- Programação orientada a eventos

Aplicações Flex são orientadas a eventos. Toda ação é o resultado de um evento assíncrono.

Como um desenvolvedor Flex, você deve saber como responder a eventos e como criar e disparar eventos. Para isso, é necessária uma sólida compreensão da arquitetura de eventos do Flex, incluindo familiaridade com os seguintes conceitos:

· Eventos nativos (Flash Player ou Framework de eventos Flex)

· Eventos customizados (Eventos criados pelo desenvolvedor, que estende a classe Event ou uma de suas subclasses)

· Disparar eventos, propagação de eventos (ver classe EventDispatcher e seu método dispatchEvent)

· Event listeners, event handlers (ver classe EventDispatcher e seus métodos addEventListener e removeEventListener)

· Fases do evento (capture, target & bubbling phases; target vs. currentTarget)

· Objetos do evento, tipos de eventos (ver classe Event e subclasses)

· Comportamento do evento default (ver classe Event e subclasses e seu método preventDefault)

5- Data binding

Aparentemente, data binding é um “no brainer”[1]. É só vincular o valor de uma propriedade ao valor de outra propriedade usando chaves. Quando o valor da propriedade de origem for alterado, o valor da propriedade de destino também é alterado.

No entanto, existe uma sobrecarga associada ao uso indiscriminado de data binding, podendo haver implicações no desempenho. Uma sólida compreensão de data binding ajudará a determinar quando é apropriado o seu uso e quando não é.

· Flex Tips – Using Bindable Metadata Events

· Michael Labriola’s presentation entitled Diving in the Data Binding Waters

6- Item renderers

Uma característica de uma aplicação Flex bem projetada é a apresentação dos dados de uma forma visualmente atraente. O Flex oferece uma série de controles baseados em listas (DataGrid, List, TileList, HorizontalList, etc) responsável pela apresentação dos dados. Portanto, pode-se personalizar a exibição dos dados com a ajuda de item renderers.

Você irá consumir muito tempo trabalhando com item renderers. Então é melhor saber bem como ele funciona.

· Flex Examples – Item Renderers in Practice

· A Deep Dive into Flex 4 Lists and Layouts

7- Acesso remoto a dados

Você conhece muitas aplicações que não interagem com os dados? Eu também não. Saiba como recuperar dados através de HTTPServive, WebService e RemoteObject. A arquitetura do framework Flex também poderá ajudá-lo com isso (ver #9).

· Retrieving and handling data with HTTPService

· Retrieving and handling data with WebService

· Retrieving and handling data with RemoteObject

8- Styling / Skinning

Não vamos nos esquecer que o Flex é uma tecnologia de interface e, como tal, certamente há expectativas em relação ao design. Como um desenvolvedor Flex, você deve ser capaz de personalizar a aparência de seus aplicativos usando estilos CSS, gráficos e/ou skins.

Com o Flex 4, não há mais desculpas. Use um pouco do seu tempo para conhecer de uma vez o lado direito do seu cérebro. É uma excelente mudança de paradigma, e vai ajudá-lo a diferenciar-se dos outros desenvolvedores Flex.

· Flex Style Explorer

· ScaleNine

· Introduction to Flex: Part 3 – Styles & Skins

9- Pelo menos um framework de arquitetura Flex

A maioria dos frameworks de arquitetura Flex impõe uma separação de camadas através da implementação do MVC (model-view-controller). Além disso, esses mesmos frameworks especificam como seu código deve ser organizado dentro do projeto Flex.

Embora muitos argumentariam que os frameworks são desnecessários, acredito que os desenvolvedores Flex se beneficiam em muitos aspectos da experiência de usá-los. Basta assistir ? s técnicas (boas ou más) empregadas por um framework para resolver problemas complexos de arquitetura. Isso contribuirá para seu crescimento como um desenvolvedor Flex.

Além disso, é difícil negar o fato de que a experiência com framework aumentará substancialmente o seu valor comercial como um desenvolvedor Flex. Jesse Warden me disse recentemente “Existem poucas empresas que não usam frameworks, mas isso é raro. Queiramos ou não, está na ‘moda’”. Eu concordo com Jesse.

· Cairngorm

· Parsley

· PureMVC

· Mate

· Swiz

· Robotlegs

10- Ciclo de vida de componentes e display list

Eu não estava convencido da necessidade de aprender o ciclo de vida de componentes Flex ou da display list até que escrevi o meu primeiro componente customizado (na verdade foi um componente semi-customizado que se estendia do componente Canvas). Até essa época eu usava componentes nativos do Flex, usando apenas o MXML enquanto que a display list era renderizada para mim. Em nenhuma vez tive que usar os métodos addChild, createChildren ou commitProperties, e usava o evento creatiomComplete para tudo.

Meu primeiro componente customizado usava uma quantidade enorme de eventos assíncronos, e eu não poderia prever a ordem em que cada evento seria disparado. Só depois que eu aprendi os métodos e variáveis do ciclo de vida dos componentes do Flex que eu pude ter um certo controle.

Estes métodos do ciclo de vida estão lá para serem usados. Saiba como funcionam e use-os para o seu benefício. Sua vida será mais fácil e você perderá menos cabelos.

· Colin Moock’s Lost ActionScript Weekend – The Display List

· Creating New Components in Flex 3

· Diving Deep with the Flex Component Lifecycle

· Understanding the Flex 3 Component and Framework Lifecycle

[1] Expressão americana usada para algo que requer pouco esforço mental ou inteligência para realizar ou compreender

Twitter!

Na programação orientada a objetos um iterador é um objeto que possibilita o programador a examinar um objeto que contem outros objetos (container).

As semânticas de acesso dos iteradores são fixas e você pode implementar diversos tipos de iteradores de forma desacoplada a partir de uma interface.
Imagine um iterador como um cursor de uma base de dados onde os elementos são acessados sequencialmente (cursor).

Os arquivos utilizados podem ser encontrados em:
https://github.com/wlepinski/as3-patterns/tree/master/Iterator

Basicamente a interface de um iterador pode ser definida como:

Com essa interface podemos prover algumas implementações de iteradores para qualquer tipo de objeto que descreva qual o seu iterador, a interface abaixo será utilizada pelos nosso objetos que podem ser iterados.

Vamos criar um iterador (ArrayIterator) que implementa a interface IIterator e recebe como parâmetro no construtor um ArrayList que também vamos implementar a seguir:

Implementação do ArrayIterator:

Implementação do ArrayList:

Podemos utilizar o iterador de duas formas, em um “for” ou em um “while”:

Salve pessoal!

Essa semana eu inicie a fase de contratações da equipe que vai trabalhar comigo em um projeto nos próximos meses, entre horas de pesquisa e análise de possibilidades eu me deparei com uma situação engraçada e atípica, pesquisando sobre média salarial de profissionais de agências de publicidade encontrei um estudo feito pela ABRADI (Associação Brasileira de agências digitais), esse estudo mostra o salário dos profissionais de agências digitais descriminado por áreas e níveis de conhecimento.

Para minha surpresa percebi que nesse estudo Flash Developers estão na lista dos mais bem pagos do mercado, ficando atrás apenas de profissionais de atendimento, planejamento e diretores.

Essa grata surpresa me incitou a escrever uma matéria sobre quais são as principais características e os principais conhecimentos de um Flash Developer Sênior, basicamente nessa matéria vou descrever sob o meu ponto de vista os conhecimentos que um “Flash Developer” tem que ter para alcançar o topo da agência onde trabalha ou vai trabalhar.

Fuja das brigas sobre qual tecnologia é a melhor

O Flash há muito tempo desperta amor e ódio nas pessoas, varias vezes eu me vi incluso em “brigas” sobre qual é a melhor tecnologia e qual é o lugar do Flash na escala de desenvolvimento.

Minha opinião sobre o assunto sempre foi clara, caso alguém me mostre uma tecnologia que seja tão hibrida quanto o Flash no quesito integração com outras tecnologias, ferramentas de desenvolvimento, documentação oficial útil e descomplicada, cursos, metodologia, comunidade de desenvolvimento ativa, padronização de desenvolvimento e possibilidade de desenvolvimento para várias plataformas, nesse dia eu com certeza vou parar de trabalhar com Flash/Actionscript e aprender essa incrível tecnologia que terá batido o Flash, até esse dia, eu prefiro continuar no mundo da plataforma flash. Então fica a dica, não perca seu tempo nesse tipo de discussão, deixe que cada um escolha seu caminho, acredite, isso vai ser melhor para você!

Aprenda a desenvolver usando OOP

Se você é um verdadeiro “Flash Developer” com certeza já fez alguma coisa em OOP, esse padrão de programação pode salvar a sua vida quando o tempo for curto e o projeto desafiador. Para saber mais acesse esse link

Use um Framework para facilitar o desenvolvimento

Frameworks ajudam você a manter um padrão de desenvolvimento e diminuem o tempo de tarefas simples, existem ótimos frameworks de desenvolvimento, entre eles eu destaco o Gaia Framework e o ASF-AS3(Neto Leal). Use sem moderação!

Aprenda integrar redes sociais

Não é novidade alguma que as redes sociais revolucionaram a forma como as coisas acontecem na web, então é muito importante que você saiba integrar diversos serviços ao seus sites/aplicativos em Flash, serviços como Youtube, Facebook, Twitter e Flickr tem áreas específicas para desenvolvedores de várias tecnologias e em todas elas você pode encontrar APIs para auxiliar no desenvolvimento de seus sites/aplicativos.

Aprenda uma linguagem de programação Server-Side

Não que você tenha que ser um expert nessa linguagem, mas é muito bom você ter a visão do “outro lado”, não serão poucas as vezes que vão querer que aquele “hotsitezinho” que você fez tenha uma área administrativa e grave/leia dados de um banco de dados, ou que aquele outro programador “mala” vai dizer que isso ou aquilo não é possível com flash, nesse caso eu indico duas tecnologias exatamente nessa ordem, Coldfusion e PHP. Não se esqueça de aprender a trabalhar bem com Mysql, mas atenção, você não vai se tornar o melhor programador Serve-Side do mundo então tente não perder sua “veia” de design com essas tecnologias o interessante é você ainda continuar “mandando bem” em áreas fundamentais como Motion e Design.

Todo Flash Developer TEM que saber trabalhar com Photoshop

Isso pode levantar certa polêmica, mas a grande verdade é que se você pretende ser um Flash Developer e gerenciar um projeto é fundamental que você conheça profundamente o Photoshop, que tenha uma boa noção de design, tipografia e afins e conheça muito de motion design, por mais que digam o contrário 80% do trabalho de um Flash Developer é dar vida a interfaces malucas criadas por Diretores de Arte ainda mais malucos!

Animação via código é muito melhor que Timeline

Falar isso para os desavisados pode parecer uma heresia, mas a verdade é que, seja um banner, um hotsite ou um grande site é muito melhor você fazer todas as transições e motions via código, nesse caso eu indico que você use a Greensock. Trabalhando dessa forma você terá uma facilidade maior na hora de fazer aquele ajuste fino ou implementar aquela alteração de última hora.

Tenha boas referências

A comunidade de desenvolvimento Flash é muito unida, existem vários blogs como o meu que visam o crescimento profissional das pessoas sem nada em troca, é fundamental que você tenha boas referencias, que fique ligado nas constantes novidades que circulam no mundo da plataforma flash(sabe o que é molehill?), quer saber quem são as minhas referencias? Segue o link. Outra dica, tenha uma pagina de Labs sempre atualizada ou então crie um blog para compartilhar seus conhecimentos e experiências, isso coloca você em destaque na comunidade e pode abrir portas para bons trabalhos =)

Editor de código

A IDE do flash é muito boa, na versão CS5 o pessoal da Adobe melhorou bastante o editor de código, porém, ele está longe de ser a melhor opção do mercado, eu particularmente uso o FlashDevelop para fazer isso, mas o Flash Builder 4 também é uma boa opção, escolha a sua!

Pense fora da caixa

Há muito tempo o flash player domina as estatísticas de software mais instalado do mundo, mas é importante saber que o Flash não serve apenas para desenvolver sites, hoje em dia existe uma infinidade de dispositivos que utilizam o flash player, hoje você pode criar conteúdo para Iphone, Ipad, Smartphones com Android e tablets como o Motorola Xoom. Eu acho muito importante estar sempre ligado nessas novas possibilidades e de preferência ter um (ou todos) para estudos, pense fora da caixa, quem sabe isso não vai te render uma grana extra!

Em casa de ferreiro o espeto é de pau, mas não deveria ser!

Tenha sempre um portfólio bem atualizado, eu não posso falar disso com muita autoridade, pois há três anos venho tentando ter tempo para atualizar meu site, kaekae, mas é fundamental que você tenha um portfólio online que mostre exatamente o que você é capaz de fazer, ele com certeza vai ser decisivo na hora da contratação para uma empresa ou freela.

Curso, congressos, atualize-se!

É importante que você faça pelo menos uma vez ao ano uma reciclagem de seus conhecimentos, eu particularmente guardo 5% do que ganho ao ano para fazer isso, esse ano vou estar no FlashCampBrasil, uma dica que deixo são os cursos do Luciano Augusto o cara manda super bem em cursos a distância.

Saiba cobrar por seus projetos e não vacile nos prazos.

O maior erros do Flash Developer está na hora de passar o orçamento, acredite, nós estamos no topo da cadeia alimentar dos desenvolvedores, quando aparecer aquele freela não fique com medo de cobrar o valor real, você é um Flash Developer e sua hora é uma das mais caras do mercado.
Outra coisa importante são os prazos, saiba quanto tempo você leva para fazer determinadas atividades comuns a um Flash Developer, não cumprir prazos está fora de questão e lembre-se sempre existe alguém que conhece outro alguém e uma vez queimado no mercado você estará fadado ao limbo!

Não existe limite para a criatividade dentro do flash, não desanime o caminho é longo mais as recompensas em R$ são grandes depois de um tempo!

Deixe um comentário sobre esse artigo e não se faça de difícil se precisar de ajuda!
Um abraço

Meu perfil no Facebook
Meu Twitter

Bibliotecas Open Source de AS3 – parte II – Greensock Tweening Platform Paulo Lameira Flash Developer na Goody Responsavel pelo desenvolvimento de revistas online. GAIA Framework Nuno Ribeiro Licenciado em Eng. Informática pela Escola Superior de Tecnologia do IPS, cedo percebeu que era o Engenheiro da mochila, calção largo e chinelos e não o do fatinho. Após [...]

Salve pessoal
Estou voltando à ativa nesse blog, espero que agora eu encontre tempo para criar os tutoriais.

Inicialmente gostaria de deixar claro que o foco desse blog não é o público que eu chamo de “Hard ActionScript Developer” o meu foco são aqueles desenvolvedores que estão iniciando ou que são intermediários no mundo do Actionscript 3.0, então nem sempre vamos focar no “melhor código” para os exemplos, mesmo porque eu nem teria tempo para fazer isso, na verdade a minha intenção e abordar superficialmente algumas coisas que vejo no meu dia-a-dia e apresentar coisas realmente usuais para todos.

Dito isso, fica claro que não tenho a intenção de criar uma metodologia definitiva para desenvolvimento, então pegue leve nas críticas =)

Hoje vamos falar sobre a utilização do Gaia Framework para desenvolvimento de pequenos projetos (games, hotsites etc…)

O que é o Gaia Framework?

O Gaia Framework é um projeto Open-Source para Actionscript 2.0 e 3.0 que visa facilitar sua vida na hora de desenvolver projetos em Flash, ele reduz drasticamente o tempo que você leva desenvolvendo, pois cria automaticamente alguns dos processos comuns a qualquer site em Flash.
Com o Gaia Framework é possível criar sites usuais em flash em pouco tempo com características que você levaria horas para fazer tais como:

1. Navigation
2. Transitions
3. Preloading
4. Asset Management
5. Dynamic Font Loading
6. SEO
7. DeepLinks

Para maiores informações e detalhes sobre o que é o Gaia Framework acesse o site

Instalando o Gaia Framework

Acesse o site e faça download do arquivo MXP do Gaia Framework, feito isso clique duas vezes no arquivo para instalar. Abra o Adobe Flash Cs5 e vá na aba Help > Manage Extentions ,certifique-se que o Gaia Framework esteja instalado corretamente como na imagem abaixo:

Pronto, agora o seu Adobe Flash Cs5 já está pronto para trabalhar com o Gaia Framework.

Instalando Gaia Site Creator

O Gaia Site Creator é um aplicativo AIR que facilita ainda mais o desenvolvimento com Gaia Framework ele irá nos ajudar na hora de criar o arquivo “site.xml” que define as “paginas” que nosso site em Flash vai ter, sobre esse arquivo XML vamos falar nas próximas aulas, por hora apenas acesse o site e instale o Gaia Site Creator.

Criando 1º projeto com Gaia Framework

Com o Adobe Flash Cs5 aberto vá na aba Window > Other Panels > Gaia Framework
Uma janela como essa vai se abrir para você:

1. Criar um novo projeto em Actionscript 3.0
2. Criar um novo projeto em Actionscript 2.0 (sai fora, credo!)
3. Importar um projeto existente
4. Fazer uma doção para o Steven Sacks =)
5. Lista de projetos criados (ainda em branco)

Esse é o painel que você vai trabalhar durante todo o tempo de desenvolvimento com o Gaia Framework aconselho você a deixar ele em um lugar de fácil acesso durante o desenvolvimento.
Agora é a hora de começarmos realmente a desenvolver utilizando o Gaia Framework, com o painel do Gaia Framework aberto clique no botão “Create AS3″ e configure como a imagem abaixo:

1. Nome do projeto que vamos desenvolver
2. Pasta raiz do projeto
3. Versão do Flash Player que esse projeto vai ser compilado
4. Versão do Gaia Framework e do Greensock (motor de animação) utilizado
5. Tamanho do Stage, Framerate e cor
6. Estrutura de pastas criada pelo Gaia Framework aconselho a deixar dessa forma
7. Tipo de projeto utilizado, nesse exemplo vamos usar o FlashDevelop para desenvolver

Com todos esses requisitos preenchidos clique no botão “Create New Project” para criar o projeto do Gaia Framework.
Pronto, o Gaia Framework acabou de criar a estrutura básica para trabalharmos o projeto veja como ficou nossa estrutura:

1. Arquivo de configuração do Gaia Framework
2. Arquivo de projeto do FlashDevelop
3. Pastas com arquivos publicáveis (swf, imagens, XML…)
4. Pasta com os arquivos FLAs
5. Pasta com os arquivos .as
6. Pasta com os templates (não vamos usar mais não delete)

Agora é hora de configurar o arquivo “site.xml” que determina quais “paginas” serão criadas em nosso projeto, lembra do nosso amigo Gaia Site Creator? Então é hora de iniciar ele, com o Gaia Site Creator aberto importe o arquivo “site.xml” que se encontra dentro da pasta “bin>xml” o arquivo deve aparecer como na imagem abaixo:

Essa é a estrutura básica que o Gaia Framework cria para o projeto, porém, não é a estrutura que vamos usar para esse projeto inicial siga os próximos passos para configurar corretamente o arquivo “site.xml”
Clique no item “home” e no item “id:nav” e arraste eles para o campo vermelho chamado “drop here to delete” como mostra a figura abaixo:

Configurando um projeto de portfólio dentro do Gaia Site Creator

O item “id:index” funciona como uma “Main page” ele é o root do nosso aplicativo(existe ainda uma classe chamada “Main.as” mas vamos falar sobre ela depois. Nesse projeto todas as paginas serão filho da pagina “índex.fla”

Para criar um novo “filho” no arquivo “site.xml” você deve clicar na aba “assets” do Gaia Site Creator e arrastar o item “New Page” para dentro do item “id:index” e depois configurar algumas propriedades como mostra na figura abaixo:

1. Nome utilizado posteriormente para acessar essa pagina
2. Nome do arquivo swf que será criado quando o Gaia Framework for compilado
3. Titulo da “pagina” quando esse arquivo for acessado

A descrição para as outras configurações desse arquivo não serão abordadas nesse momento e podem ser encontradas nesse link

Antes que eu esqueça de dizer esse projeto vai ser um portfólio de um Flash Developer como eu e você então a estrutura de paginas vai ser como mostra a imagem abaixo:

1. Pagina de apresentação
2. Perfil do desenvolvedor
3. Portfólio
4. Fotos
5. Vídeos
6. Contato

A minha intenção com esse tutorial é que posteriormente eu mostre como trabalhar com algumas classes que utilizo então podemos explorar integrações com Twitter, Flickr, Youtube etc… Esse projeto vai servir como base para outros tutoriais.

Criada essa estrutura dentro do Gaia Site Creator clique na aba “file > Export > ExportSiteXML” e sobrescreva o arquivo “site.xml” com essa nova configuração, abra esse arquivo dentro do software Flash Develop (imagino que você já esteja utilizando ele para desenvolver seus projetos) a estrutura do arquivo “site.xml” ficou da seguinte forma:

Se você seguiu todos os passos que descrevi acima, abra novamente o Adobe Flash Cs5, com o painel do Gaia Framework aberto vá até a aba “scaffold” e clique em “scaffold project”.

Ele vai criar todos aqueles arquivos que configuramos no “site.xml” dentro da pasta de projeto, aguarde os arquivos serem criados/compilados, ao final desse processo ele vai abrir uma aplicação como na figura abaixo:

Agora no painel do Gaia Framework a aba que ficou marcada é “Publish” clique no botão “save” que fica no canto direito superior para salvar esse projeto. Agora na lista de projetos criados você tem todos os projetos que está trabalhando no Gaia Framework como mostra uma visão dos meus projetos na figura abaixo:

Clique duas vezes sobre o projeto que estamos trabalhando, vá até a aba “publish” clique na pasta “lib” e veja que todos os arquivos configurados no “site.xml” foram criados dentro do projeto como mostra a figura abaixo:

1. Esse botão deve ser usado sempre que você fizer alterações nos arquivos, não adianta apenas dar um CTRL+Enter no arquivo é preciso clicar nesse botão para compilar os arquivos marcados na lista, caso algum arquivo não esteja marcado ele NÃO vai compilar o arquivo
2. Botão abre a pasta raiz do projeto
3. Lista de arquivos do projeto
4. Esse botão sincroniza as modificações feitas no arquivo “site.xml” e vamos tratar disso nos próximos tutoriais

Clique no botão “Test Project” para ver o resultado desse tutorial, lembrando que essa tela preta que aparece é fruto de uma configuração inicial feita pelo Gaia Framework, se você abrir por exemplo a pagina “home.fla” não vai ver nenhum “asset” dentro dela ou da library, não se assuste vamos tratar desses e de outros assuntos no próximo tutorial.

Nesse tutorial não vamos abordar o desenvolvimento do menu do site, então para navegar no projeto feito até aqui utilize o botão direto do mouse e clique no ContextMenu para navegar entre as paginas.

Conclusão

Nesse tutorial eu abordei os aspectos básicos para desenvolver usando o Gaia Framework, veja que não fizemos nenhuma linha de código, mas não se engane existem muitas coisas para aprender ainda.

No próximo tutorial vou falar sobre a estrutura de pastas criadas pelo Gaia Framework e como iniciar nosso projeto com as modificações em Actionscript 3.0 ou seja, prepare-se para programar no próximo tutorial.

Arquivos utilizados no tutorial

Baixar

Resultado desse tutorial

Link

Meu perfil no Facebook
Meu Twitter

Uma abraço a todos, divulguem esse tutorial!