Ontem durante uma das minhas aulas surgiu a necessidade de se desenvolver um menu ao estilo do MacOS. Apesar de não ter perdido muito tempo a aperfeiçoá-lo, o resultado final ficou engraçado, pelo que partilho o código fonte convosco. Antes de mais, o resultado final:

Experimentem a clicar nos ícones. O menu pode ser usado tanto no Flash CS3 como no Flex.

Para usarem o menu nos vossos projectos, basta que:

1. Coloquem na pasta do vosso projecto o ficheiro MacMenu.as;
2. Coloquem no stage os ícones que pretendem que façam parte do menu. Tenham o cuidado de centrar as imagens no ponto 0,0 por causa do zoom;
3. Façam o seguinte código:

var listaDeIcones:Array=[m1, m2, m3, m4, m5, m6];

var menu:MacMenu = new MacMenu(listaDeIcones);

addChild(menu); // Por causa do enterFrame. Preferia evitar esta solução, mas por agora…

Onde m1, m2, m3, etc, são o nome das instâncias dos vossos ícones.

O menu possui três parâmetros de configuração:

• ratio: define a distância de reacção ao rato. Quanto menor o número, mais próximo precisa o rato de estar para que os ícones reajam. Exemplo: menu.ratio= 130;
• escala_maxima: define o zoom máximo que os ícones terão. Exemplo: menu.escala_maxima=1.2;
• escala_minima: define o zoom mínimo que os ícones terão. Exemplo: menu.escala_minima=0.5;

Decidi separar o código de reacção aos cliques retirando-o da classe MacMenu, isto porque podem querer criar as vossas próprias reacções aos cliques. Se no entanto quiserem usar as do exemplo acima (no clique, o ícone fica com um brilho e começa aos saltos), precisarão da classe GlowReactor e da pasta caurina:

1. Copiar para o vosso projecto a pasta caurina;
2. Copiar para o vosso projecto o ficheiro GlowReactor.as;
3. Fazer o seguinte código:

new GlowReactor(listaDeIcones);

Algumas das práticas usadas no exemplo são discutíveis, mas recordem-se que foi feito em meia hora com fins educativos. Ainda assim, espero que vos agrade e seja útil.

O código fonte pode ser descarregado daqui.

A Adobe está a disponibilizar gratuitamente cerca de 20 seminários online sobre Flex, Air, Flash Lite 3, ColdFusion, Blaze DS, Dreamweaver, etc. Para aceder aos seminários precisará somente de um computador ligado à Internet com o Flash Player instalado e de fazer uma pré-inscrição aqui nas sessões individuais que pretender assistir.

Quer assistir a uma sessão mas não tem disponibilidade à hora marcada? Não tem problema - a Adobe disponibilizará mais tarde as gravações dos seminários.

As sessões serão as seguintes:

Segunda

Extending Web to the Desktop with AIR
Segunda, 24 de Março - 16:00 às 17:00

Getting Started with Flash Lite 3 and CS3
Segunda, 24 de Março - 18:00 às 19:00

What’s New in ColdFusion 8
Segunda, 24 de Março - 20:00 às 21:00

Building Rich Internet Applications with Flex 3
Segunda, 24 de Março - 23:00 às 00:00

Terça

Introduction to Adobe Blaze DS
Terça, 25 de Março - 16:00 às 17:00

Integrating Salesforce.com and Flex
Terça, 25 de Março - 18:00 às 19:00

Building AIR Applications with Flash CS3
Terça, 25 de Março - 20:00 às 21:00

Dreamweaver: Effective Standards-based Workflows for Ajax
Terça, 25 de Março - 23:00 às 00:00

Quarta

Adobe AIR Local Data Storage Options With Emphasis on Using Embedded SQL Databases
Quarta, 26 de Março - 16:00 às 17:00

Flash Lite and Flex for Tourism
Quarta, 26 de Março - 18:00 às 19:00

ColdFusion Powered Rich Applications for the Internet and Desktop
Quarta, 26 de Março - 20:00 às 21:00

Flex and Java – Tying the Knot!
Quarta, 26 de Março - 23:00 às 00:00

Quinta

Flex Data Services
Quinta, 27 de Março - 16:00 às 17:00

Adding Live Chat with ColdFusion & Adobe Blaze DS
Quinta, 27 de Março - 18:00 às 19:00

Blood from a Stone: Flash Game Optimization on Low-end mobile devices
Quinta, 27 de Março - 20:00 às 21:00

Flex Visual Data & Charting
Quinta, 27 de Março - 23:00 às 00:00

Sexta

The Essential Guide to Dreamweaver CS3 with CSS, Ajax, and PHP
Sexta, 28 de Março - 16:00 às 17:00

ILOG Elixir: Your Remedy for Vibrant Data Visualization
Sexta, 28 de Março - 18:00 às 19:00

AIR Native Drag and Drop
Sexta, 28 de Março - 20:00 às 21:00

Flex Architecture
Sexta, 28 de Março - 23:00 às 00:00

Fiz a conversão das horas para GMT somando 7 horas ao US/Pacific. Se me tiver enganado, deixe um comentário neste post para que possa efectuar a correcção o quanto antes.

Clique aqui para fazer a inscrição ou para mais informações.

Foi com enorme satisfação que participei e ajudei no evento de aniversário da comunidade. Espero que esta continue a crescer conforme tem demonstrado, e tenho a certeza que ano de 2008 será o ano de expansão das RIAs a nível mundial mas também neste nosso cantinho ao fundo da Europa chamado Portugal.
Quero desde já referir também a qualidade das apresentações do evento que superaram e de que maneira as minhas expectativas. Sem desprimor para as restantes, os meus parabéns para as apresentações do Paulo Moreira e do Luís Costa, pois apresentando exemplos de aplicações reais acho que se destacaram das outras.

Concordo com o João e outros que já comentaram o evento na mailing list, nomeadamente que no próximo teremos que fazer um programa com horário, intervalos, coffee breaks, jantar, strippers, convívio, …, pois penso que aí falhamos, mas também acho que esta falha foi resultado da grande afluência e o que se projectou ser uma reunião informal, acabou por ser um workshop de muito bom nível. Tenho a certeza que para a próxima não falharemos nesse aspecto.

Não posso também deixar de referir o meu agradecimento a FLAG pelo apoio e disponibilização das suas instalações para a realização deste evento.

Para concluir e em jeito de mini tutorial, vou deixar aqui um resumo da minha apresentação - Display List em Flash CS3, conforme prometido, e apelar também a todos aqueles menos “geeks” da comunidade que não se acanhem e comecem também a participar. É essencialmente a esses a quem eu me quis dirigir com esta apresentação, e a todos os que estão em processo de migração do AS2 para o AS3..

Display API / Display List em AS3

Umas das principais funcionalidades do Actionscript é mostrar elementos no ecrân. Para tal a plataforma Flash disponibiliza-nos uma grande variedade de ferramentas para criar e manipular elementos gráficos que poderão ser divididas em 2 categorias:

• Flash runtime API: são um conjunto de classes que permitem utilizar e interagir com elementos visuais, assim como utilizar bitmaps e formas vectoriais.
• User Interface Components
  • o conjunto de UI componentes da framework do Flex, uma colecção personalizável de pequenas user-interfaces construidas em cima da Display API.
  • o conjunto de UI componentes do Flash, semelhante ao do Flex mas simplificado e com funcionalidades mais limitadas, assim como em muito menor numero.

A Display API, está presente em todas as plataformas Flash e portanto disponível em qualquer ficheiro .swf . Todos os elementos gráficos criados em Actionscript são criados e manipulados através do conjunto de classes que constituem esta API.

Todas estas classes estão hierarquizadas de forma reflectir 3 níveis de funcionalidades, nomeadamente: Visualização, Interactividade e de Contentor. Estas funcionalidades correspondem as classes DisplayObject, InteractiveObject e DisplayObjectContainer. Estas classes não podem ser instanciadas e servem unicamente como Abstracção para classes mais concretas e que estão estruturadas da seguinte forma:

No 1º Nível teremos todas as classes que descendem da class DisplayObject, e por esse motivo qualquer instância destas poderá ser posicionada, escalada, etc… Ou seja, podemos utilizar as propriedades x, y, width, height,…. Teremos também neste nível métodos de conversão de coordenadas como localToGlobal(), globalToLocal(), …, e possibilidade de testar colisões ou intersecções com os métodos hitTestPoint(), hitTestObject(), … Podemos também a estas classes aplicar transformações, mascaras e filtros.

No 2º Nível teremos todas as classes que descendem da classe InteractiveObject pelo que todas as instâncias destas poderão responder a eventos de rato e teclado.

No 3º Nível, teremos as classes que descendem do DisplayObjectContainer pelo que essencialmente é-lhes acrescentada a particularidade de poderem conter outras instâncias dentro destas, sendo que o nível de sobreposição dentro de cada container será gerido pela Display List como será explicado seguidamente. Dentro destas classes temos o MovieClip e o Sprite cuja diferença é essencialmente o facto do Sprite ser um MovieClip sem timeline (um MovieClip só com uma frame).

Display List

Definidas as classes visuais, a gestão de como todos os elementos gráficos aparecem no palco é feita por uma Display List, que não é mais nem menos que uma estrutura hierárquica que gere os níveis de sobreposição de todos os elementos de um .swf - pode ser vista como a sobreposição de objectos no eixo dos zz, tal como se faz com as layers no Photoshop ou outra aplicação do género.

Ao ser criado um .swf é criada uma instância da classe Stage, instância esta que irá conter a nossa aplicação Flash, seja esta feita directamente na timeline, ou criada por uma Document Class. Dentro da instância da aplicação serão acrescentados todos os elementos gráficos através do método addChild(), ou addChildAt(), conforme a representação gráfica que se segue:

Depths

Acrescentar elementos à Display List faz com que o nível de sobreposição seja sequencial e a medida que se acrescenta um elemento este fica numa hierarquia superior ao elemento anterior. No entanto poderemos utilizar alguns métodos para remover, alterar, trocar, ler níveis. É de salientar que esta gestão é gerida toda ela pela própria Display List, não podendo haver níveis vazios entre elementos gráficos. Podem experimentar alguns destes métodos na animação que se segue, sendo que se quiserem poderão também ler o código desta neste ficheiro .fla:

Despeço-me por aqui, e espero que este seja o primeiro de muitos posts para aquele pessoal menos “geek. Desafio também o resto dos presentes a participar, e mais uma vez foi um prazer fazer parte do evento.

Prometi a mim próprio que mal chegasse a casa iria descansar e…. vou quebrar essa promessa, deixando aqui as minhas conclusões do encontro de hoje antes de ir dormir.

Queria dizer que fiquei surpreso com o número de inscrições no evento, e algo que seria supostamente um encontro entre “geeks” maluquinhos das RIAs a apresentarem coisas “geeks” para “geeks”, acabou por se tornar num conjunto de apresentações, que embora não tenham tido a qualidade de um Adobe Max, até foram bastante interessantes considerando que não houve qualquer tipo de organização/preparação.

Estão de parabéns os que foram assistir, estão de parabéns os que apresentaram, e se houve desilusões, digam o que não gostaram (e o que gostaram) para corrigirmos num futuro evento.

Este tipo de eventos não é suposto que seja perfeito - era supostamente um “encontro informal” -, mas de qualquer forma existem alguns pontos menos positivos a corrigir num próximo:

• O nível técnico na generalidade talvez tenha sido demasiado alto. A grande maioria das pessoas está ainda a conhecer estes mundos, e talvez tivesse sido mais proveitoso se as apresentações tivessem sido mais introdutórias. Ou pelo menos que a primeira apresentação tivesse sido de introdução às RIAs, e respectivas tecnologias tal como aconteceu no seminário no ISCTE (apresentação disponível aqui)
• A minha entrada (boas vindas) não correu particularmente bem, estava demasiado “speedado”, muito ausente e talvez devesse ter perdido um pouco mais de tempo com alguns conceitos de base.
• Ainda não foi hoje que o Silverlight me surpreendeu. Queria ver algo prático, algo demonstrativo do desenvolvimento em Silverlight e mais uma vez fiquei sem conhecer a plataforma.
• Talvez tivesse sido preferível ter havido uma apresentação mais introdutória sobre Cairngorm, com um conjunto de motivações e razões para a sua aprendizagem antes da apresentação do João Fernandes. Embora seja muito fácil utilizar a framework, para a perceber é preciso dominar conceitos muito técnicos e difíceis de interiorizar. Tirando isso, o João Fernandes esteve muito bem, visto que não é nada fácil explicar Cairngorm ainda mais em tão pouco tempo.
• As strippers mais uma vez não apareceram. O que, é no mínimo chato…
• E, aquele que considerei o ponto menos positivo: para um encontro informal, foi demasiado formal! Os objectivos principais do encontro eram mesmo promover o conhecimento entre as pessoas, e as apresentações eram “apenas” um extra para criar um precedente. Vim-me embora sem ter nomes associados a caras, o que é algo que não poderá acontecer num próximo evento, até porque vai completamente contra os objectivos da comunidade. Num próximo evento, terá que haver um intervalo de pelo menos hora e meia, com comida à mistura, para que as pessoas possam falar livremente. E no final, voltamos à comida e à conversa, mas ficarmos sem confraternizar é algo que não pode voltar a acontecer!

Positivamente, tenho a realçar:

• O número de pessoas que foi ao evento, que superou de longe as expectativas!
• O facto de, não tendo havido nenhuma organização em específico e preparação prévia, as apresentações até terem corrido bem.
• A apresentação do Asko/”A minha primeira aplicação em Flex”, pelo Luís Costa, foi bem feita e deviam ter havido mais apresentações do género, de pessoas que entraram à pouco tempo nesta área, com as respectivas dificuldades e sucessos. Mas continuo a achar que a aplicação precisa de um novo interface gráfico. Algum designer se oferece para fazer um novo layout para a aplicação?
• Fiquei completamente estupefacto com a apresentação do Paulo Moreira, “And now for something completely different”. É realmente fantástica a utilização que ele faz do Flash, e é algo que eu gostaria imenso de ver ao vivo. Ainda estou pasmado, e espero vir a voltar a ver mais coisas do género. Acima de tudo, também fiquei extremamente contente por ver alguém que puxa o Flash aos limites, e sabe o que faz e do que fala. Paulo Moreira, por favor, estou ansioso pela tua próxima apresentação!!
• Julgo que a minha apresentação de integração do Flash CS3 com o Flex 2 foi muito útil, até porque vai ajudar muitos dos que usam Flash CS3 a arriscar-se um pouco mais a entrar no Flex, pois agora têm a opção de escolher a ferramenta certa para cada caso. Enquanto esperamos pelo Thermo…
• Deu para perceber que, apesar do Flex ser algo ainda novo para muitos dos presentes, valeu muito a pena apresentar Cairngorm pois o problema da organização do código, não só em Flex mas noutras linguagens, é um problema sentido por muitos dos que tiveram presentes que perceberam o objectivo da framework.
• Também gostei bastante da última apresentação, do Alexandre Xavier, mostrando o Flash a ser usado no contexto que menos esperaríamos: na área da engenharia industrial. Colocar o Flash a comunicar com aplicações como o Autodesk Inventor, ainda mais da forma como foi feita e com a utilidade prática que tem, é algo simplesmente fabuloso!
• Termos terminado o ciclo de apresentações ainda com 20 pessoas na sala, é algo extremamente positivo, e que não esperava ainda mais quando foram 4 horas seguidas de injecção!
• O anúncio do Adobe Flex Camp em Portugal com Serge Jespers e Ryan Stewart! Mais tarde teremos mais notícias…

Espero não me ter esquecido de nada… O João Fernandes filmou as apresentações, e julgo que as colocará online em breve.

Para quem ficou curioso com a integração de Flash com Flex, pode visitar este link, e este. Relativamente ao Cairngorm, podem visitar este link. O FlexFuel, por sua vez, pode ser consultado aqui. Houve quem tivesse à espera de ter visto uma apresentação sobre ligação de Flex a um backend PHP usando AMFPHP, mas não foi possível prepará-la. No entanto, podem consultar este link, e este, ou todos os posts que já fizemos sobre AMFPHP.

Gostaria de saber a vossa opinião: o que gostaram, e o que não gostaram para que possâmos melhorar da próxima vez.

Parabéns a todos nós! E que se voltem a repetir eventos do género várias vezes ao longo do ano!

 [Update]

Os comentários ao evento estão a ser feitos sobretudo na Mailing List.

Tal como já foi anunciado, no dia 15 de Dezembro - Sábado - haverá um encontro de comemoração do primeiro aniversário do RiaPT a partir das 16h, na Flag - Atrium Saldanha. O endereço do local pode ser visto aqui. O estacionamento no Atrium ao Sábado é gratuíto, pelo que poderão deslocar-se de automóvel ou metro com relativa facilidade.

As inscrições devem ser efectuadas deixando um comentário no post anterior, estando actualmente 31 pessoas inscritas. Aconselho também a leitura do post anterior que possui mais informação para complementar este.

Infelizmente já sei que não poderemos contar com o Kim Hansen nem com o José Luís Gouveia que não estarão em Portugal na altura. Lá teremos que fazer outro evento lá para finais de Fevereiro …. ; )

O encontro será marcado por curtas apresentações de 10 a 20 minutos, e poderemos contar também com a presença de uma equipa da 4inWeb que irá apresentar o Microsoft Silverlight.

Assim sendo, aqui fica o índice de apresentações que me chegaram às mãos até ao momento, sem nenhuma ordem em específico. Irei actualizando este post à medida que mais pessoas se forem oferecendo para fazer apresentações.

Índice de apresentações

1. Boas Vindas
2. Apresentação do Microsoft Silverlight - 4InWeb
3. Display List em AS3 - João Gonçalves
4. Integração de Flash Cs3 com Flex 2 - João Saleiro
5. Showcase: Asko / “A minha primeira aplicação em Flex” - Luís Costa
6. Introdução ao Cairngorm - João Fernandes
7. Showcase: FlexFuel - João Saleiro
8. And Now for Something Completely Different … - Paulo Moreira
9. Showcase: Configurador de Regras - Alexandre Xavier

Se houverem interessados, posso ainda apresentar “Interligação entre Flex e PHP utilizando AMFPHP”. Não incluí na lista para não terem que me aturar demasiadas vezes, mas se houver muitos interessados posso por exemplo substituir uma das minhas sessões por esta.

Antes das “palestras” teremos um fase de apresentações para que as pessoas se conheçam. No final, voltamos todos a sentar-nos e falamos livremente.

Temos tudo montado para um grande primeiro aniversário! Ok, falta o bolo… alguém se oferece para fazer um bolo?