Queria dar os parabéns à organização (exemplares!!), aos patrocinadores e principalmente aos oradores que estiveram fantásticos, com apresentações de elevada qualidade.

Não se esqueçam de deixar o vosso comentário à apresentação, e se houverem questões, não tenham problemas em contactar-me. Espero que tenham gostado e que a apresentação vos tenha sido útil.

[Update] Duas pessoas pediram-me a versão digital do documento da Webfuel, mas como não fiquei com o contacto delas, aqui vai o link [/Update]

No próximo dia 25 de Junho, Quinta-feira, vai ocorrer no ISCTE das 14h30 às 19h30 o Portugal Flash Camp 2009. A agenda é a seguinte:

Andrew Shorten (Adobe Systems) – Flash Catalyst and Flash Builder 4
João Fernandes (Cofina SGPS) – Data Centric Development
João Saleiro (Webfuel) – Enterprise RIAs: This is how we do it
Paulo Moreira (Ayumikata) – Olha mãe, sem rato nem teclado
Rui Silva (Alert) – Testes Unitários em Flex
Rui Vieira(FullSix) – Get out There

A morada do ISCTE é:

Avenida das Forças Armadas
Lisboa, 1649-026
Portugal
(Google Maps link)

As inscrições são gratuítas e limitadas a 350 pessoas. O endereço para se inscrever é http://portugalflashcamp2009.eventbrite.com/.

Mais informações no site oficial do Adobe User Group: http://aug.riapt.org

Estas pré-condições implicaram o recurso ao formato PNG – o único que permitiria resolver o problema, visto a norma JPEG2000 não ser suportada pelo Flash Player. Porém, adoptar o formato PNG para as fotos das joias com as dimensões acima referidas resultou em ficheiros de cerca de 500KB. Isto, num site com cerca de 200 a 300 jóias, com várias fotos cada.

Depois do deployment do site constatou-se o esperado: em ligações rápidas, os 500KB de cada foto não representavam grandes problems, mas em ligações lentas podia ser desesperante esperar de 10 a 20 segundos para a foto carregar. E com o disseminar recente das ligações 3,5G (kangurus, vodafone e tmn connect box, etc), tornou-se problemático pelo que tivemos que procurar por uma solução.

Encontrámos uma extensão chamada PNG2SWF pertencente ao pacote SWFTools que permitia converter um PNG para um SWF. Como é sabido, um PNG embebido em SWF pode levar compressão sendo mantida a transparência, pelo que decidimos fazer algumas experiências. Após alguns testes, tivemos resultados impressionantes: imagens de 500 Kb passaram para 60 Kb sem serem perdidos os canais alpha. Exactamente o que precisávamos!

O problema que surgiu de seguida consistia em saber como integrar o PNG2SWF com o site / backoffice sem afectar a experiência do utilizador. Era importante que o cliente continuasse a utilizar o backoffice como sempre, sem trabalho adicional.

Fizemos então um script simples, que vos ofereço adiante, e que consiste num género de proxy para carregar PNGs, só que devolve o PNG convertido para SWF, e escalado para dimensões arbitrárias escolhidas pelo programador.

O download do script pode ser feito aqui: pngoptimize . O source code pode ser visto abaixo:

<?php

    // 31-10-2008
    // pngOptimize.php by João Saleiro - Webfuel ( joao.saleiro@webfuel.pt)
    // Todo:
    // - receive quality from $_GET vars
    // - set default values for quality, w and h

    $image = $_GET['url'];
    $w = $_GET['w'];
    $h = $_GET['h'];

    $date = filemtime($image);

    // Generate SWF filename
    $swf = $image . $w . $h .'_'. $date .'.swf';

    // Generate SWF if it doesn't exist
    if (!file_exists($swf))
    {
        // Calculate dimensions
        list($width, $height) = getimagesize($image);

        $proportion = 1;
        if ($width > $height)
            $proportion = $w/$width;
        else
            $proportion = $h/$height;

        // Load image and preserver transparency
        $im = @imageCreateFromPNG ($image);
        imagealphablending($im, false);
        imageinterlace ( $im, 0);
        imagesavealpha($im, true);

        // Create new Image
        $im_dest = imagecreatetruecolor ($width*$proportion,  $height*$proportion);

        // Set transparency
        $background = imagecolortransparent($im);
        imagecolortransparent($im_dest, $background);
        imagealphablending($im_dest, false);
        imagesavealpha($im_dest, true);

        // Resize old image to new image
        imagecopyresampled($im_dest, $im, 0, 0, 0, 0, $width*$proportion, $height*$proportion, $width, $height);

        // Save new image
        $tempName=$image.'temp.png';
        imagepng($im_dest, $tempName);

        // Clean memory
        imagedestroy($im);
        imagedestroy($im_dest);    

        // Convert new image to SWF
        shell_exec("./png2swf -j 85 -o $swf $tempName");

        // Remove temp file
        unlink($tempName);
    }

    // If we get here, and there's no file, we don't return nothing
    if (!file_exists($swf))
        exit(0);

    // Return generated SWF
    header("Content-type: application/x-shockwave-flash");
    $fp = fopen($swf,"rb");
    fpassthru($fp);
    fclose($fp);
?>

O algoritmo é relativamente simples:

1. O script recebe por GET os parâmetros: url, w e h, que correspondem ao endereço relativo do PNG, e as dimensões que queremos para o nosso SWF resultante;
2. O script vai então gerar um nome de ficheiro único para aquele url, com aquelas dimensões, e para a data do PNG (i.e. se o PNG for actualizado pelo cliente o script detecta que há um PNG novo, o que implica gerar um novo SWF com novo nome);
3. É verificado se já existe algum SWF com aquele nome único (i.e. uma versão em cache daquele PNG já convertido para SWF com aquelas dimensões). Se existir, o SWF é aberto e lido, e feito um fpassthru do ficheiro (i.e. é devolvido o conteúdo do ficheiro SWF), depois de definido o header application/x-shockwave-flash para que o Flash possa interpretar o resultado do ficheiro PHP como sendo um SWF;
4. Se não existir nenhum SWF, o script vai abrir o PNG referido no URL, e criar um novo PNG temporário com as dimensões referidas, mantendo a transparência;
5. É então feita a conversão desse PNG temporário para SWF através de um shell_exec que executa o png2swf com os parâmetros necessários para a conversão, sendo gerado um SWF com o nome de ficheiro referido acima, e devolvido com o fpassthru.

Para utilizar este script é necessário:

• Colocar no servidor, na mesma directoria do pngConvert.php, o png2swf (linux) ou png2swf.exe (windows);
• Permissões de execução do png2swf nessa directoria;
• Permissões do php para a chamada de comandos externos (shell_exec);
• Permissões de escrita nas directorias onde estão os ficheiros PNG para serem lá colocados os ficheiros SWF;

Do lado do cliente, o código necessário para carregar um PNG convertido para SWF através do pngConvert é:

• MXML:

<mx:Image source="pngConvert.php?url=imagem.png&w=100&h=100"/>

• Actionscript 3 (i.e. Flash)

var l:Loader=new Loader();

l.load(new URLRequest('pngConvert.php?url=imagem.png&w=100&h=100'));

addChild(l);

O script ainda pode levar algumas melhorias, nomeadamente:

• a qualidade da imagem também ser passada por GET;
• se os parâmetros w e h não estiverem definidos, o SWF gerado é da mesma dimensão que o PNG original.

Não implementei essas melhorias porque não precisei na altura, mas se alguém quiser melhorar, é bem vindo – publicarei depois aqui a versão melhorada, com devidos créditos.

Espero que esta informação e script vos sejam úteis. O script pode ser utilizado livremente e só pedimos que seja colocado um comentário neste post com o endereço do site onde o estão a usar, para alegrarem o nosso dia.

Porém, cada vez mais o futuro passa por usarmos outros dispositivos para ligar à Internet, além do nosso PC. Telemóveis, PDAs, a própria televisão, e até o nosso carro. Se pensarmos desta forma a penetração de 98% já não parece tão relevante…

Conscientes desta realidade, a Adobe deu um passo em frente ao anunciar o Open Screen Project. Este projecto consiste essencialmente em remover restrições de várias licenças, a publicação de alguns protocolos, e a consolidação de esforços com entidades como a Cisco, Intel, LG, Motorola, Nokia, Samsung, Ericsson, Toshiba, etc, etc, no desenvolvimento de uma solução verdadeiramente ubíqua a correr nos mais variados dispositivos.

O que se pretende é que o mesmo Rich Content que designers e developers colocam na Internet para correr nos nossos PCs através do Flash Player passe também a poder correr da mesma forma em qualquer dispositivo. Ou seja, os nossos sites, RIAs, e experiências multimédia passam realmente a poder ser acedidas de qualquer local e dispositivo.

Os primeiros passos que a Adobe vai tomar são:

Remoção das restrições na utilização das especificações SWF e FLV/F4V e
publicação das APIs de portabilidade do Flash Player para dispositivos

Com isto, quem quiser instalar o Flash Player num dispositivo pessoal poderá fazê-lo. O objectivo não é fazer com que comecem a surgir uma panóplia de versões do Flash Player incompatíveis entre si (perdendo-se a ubiquidade), mas sim permitir que outros vendedores possam desenvolver a camada necessária que permita integrar e correr o flash player nos seus próprios dispositivos.

Publicação dos protocolos Adobe Flash Cast e AMF

Não só foram publicadas as especificações SWF e FLV/F4V, como as especificações dos formatos de comunicação de dados usados pelo Flash Player. Pretende-se com esta iniciativa em específico que os mais variados dispositivos possam utilizar Flash/Flex Remoting e os protocolos Flash Cast para comunicar com o servidor.

Remoção dos custos de licenciamento do Flash Player e Adobe Air

Passa a tornar-se gratuíto distribuir o Flash Player e o Adobe Air. Quer isto dizer que quem quiser colocar uma versão do Flash Player junto da sua aplicação, ou mesmo equipar um modelo de telemóvel ou outro dispositivo com o Flash Player, poderá fazê-lo gratuitamente.

São no fundo notícias importantes tanto para o utilizador final como para quem desenvolve na plataforma Flash. Caminha-se para a ubiquidade, e cada vez mais teremos acesso às suas aplicações e experiências multimédia a partir de qualquer local e dispositivo.

Mais informações

• Press Release da Adobe
• Página oficial do projecto
• Vídeo do Kevin Lynch a explicar a iniciativa
• Explicação do Ryan Stewart

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.

O preço para os 3 dias do evento (12, 13 e 14 – dia 11 é gratuíto) é de 225€, podendo a inscrição ser feita aqui.

Algumas das conferências serão sobre temas relacionados com RIAs, nomeadamente, AJAX, Silverlight, Blend e WPF:

Dia 12

• Dia 12 às 13h45 – Hands on Labs – AJAX (S0.06 / WEBHOL05)
• Dia 12 às 15h30 – Hands on Labs – Blend/WPF (S0.06 / DEVHOL03)
• Dia 12 às 17h15 – Hands on Labs – Silverlight (S0.06 / WEBHOL04)

Dia 13

• Dia 13 às 09:30 – ASP.NET AJAX: Optimizações e Extensibilidade da Framework  (A5 / WEB06)
• Dia 13 às 11:15 – Software + Services: The Convergence of SaaS, SOA and Web 2.0 (A8 / ARC01)
• Dia 13 às 11:15 – Design@Microsoft (S0.02 / WEB09)
• Dia 13 às 13:30 – Construção de Aplicações Interactivas e Ricas com Silverlight e Popfly (A5 / WEB03)
• Dia 13 às 13:30 – Designers Chalk-Talk (S0.02 / WEB11)
• Dia 13 às 15:15 – Silverlight 2.0: Part 1/2 – The introduction (A1 / WEB01)
• Dia 13 às 17:00 – Silverlight 2.0: Part 2/2 – Putting it to work (A1 / WEB02)

Dia 14

• Dia 14 às 09:30 – Hands on Labs – Blend / WPF (S0.06 / DEVHOL03R)
• Dia 14 às 11:15 – Web Client Software Factory: Construíndo Aplicações Web Ricas com ASP.NET AJAX e WCSF  (S0.03 / WEB10)
• Dia 14 às 11:15 – Hands on Labs – Silverlight (S0.06 / WEBHOL04R)
• Dia 14 às 15:15 – AJAX Development in SharePoint 2007 and DotNetNuke (A5 / WEB07)
• Dia 14 às 15:15 – Hands on Labs – AJAX (S0.06 / WEBHOL05R)
• Dia 14 às 17:00 – MVC Framework on Future ASP.NET (A5 /  WEB04)

No dia 13 estarei presente no TechDays com mais pessoal do RiaPT a assistir às conferências WEB09, WEB11, WEB01 e WEB02.
As conferências WEB01 e WEB02 (Silverlight 2.0 parte 1 e 2) são as que me despertam mais interesse e curiosidade, pois consistirão, segundo percebi, no desenvolvimento de uma RIA do princípio ao fim usando o Silverlight 2.0. Depois de Milão, estou muito curioso de ver as novas funcionalidades do Silverlight 2.0 (a versão que vimos em Milão ainda não possuia Rich Controls), e de rever novamente o Robertjan Tuit – a pessoa que teve a paciência de perder duas horas comigo e com o João Fernandes a responder a centenas de perguntas – que será o orador nestas conferências.

Vemo-nos por lá?

Esta framework tem por objectivo quase que eliminar a necessidade de se programar em ActionScript para se poder “desenhar” no Flex, tornando muito mais fácil o trabalho de criar aspectos gráficos arrojados.

Mas a framework não se fica por aqui, acrescentando ao Flex elementos bastante interessantes como efeitos de sombras, fade, alpha, fill, gradient fill, bitmap fill, entre outras características como o mask, css skinning, repeaters e ainda a possibilidade de se trabalhar directamente com determinadas zonas de qualquer imagem vectorizada (svg).

Todo o anterior trabalho “duro” de ActionScript é feito pela framework, e apenas necessitamos de recorrer a MXML e CSS para criar os nossos interfaces gráficos, e que interfaces!!

O site do Degrafa possui disponíveis bastantes exemplos com código fonte, bem como uma boa documentação.

Ainda só dei uma vista de olhos, mas parece ser bastante interessante .

Mais informações em:

Site oficial/exemplos: http://www.degrafa.com

Mais exemplos: http://samples.degrafa.com/

Download: http://code.google.com/p/degrafa/

Ninguém sabia do que se tratava, e quem quisesse ver a sua curiosidade satisfeita antes do anúncio oficial teria que colocar o logotipo acima no seu blog. A “febre” espalhou-se e era já habitual encontrar-se o logotipo em qualquer blog relacionado com webdev/flashdev, sem que ninguém soubesse precisamente do que se tratava.

Havia inclusivé variados palpites, desde novos formatos de comunicação entre o cliente e o servidor, a uma nova comunidade online, passando por uma nova tecnologia de desenvolvimento de RIAs… mas parece que ninguém acertou!

Foi anunciado à pouco: Singularity é o nome da maior conferência online de web development do mundo! Cerca de 100 oradores em 3 dias de conferências online no final de Outubro, à distância de um clique. Muitos oradores para 3 dias? Indisponibilidade para assistir? Não há problema! Os inscritos terão direito durante 6 meses a assistir em diferido às conferências que quiserem, as vezes que quiserem!

Ainda não há muita informação disponível, mas sabe-se que a conferência contará com oradores de renome em várias áreas do web development (não, não é só Flash Development!). Nomes como: Jeremy Keith, Carlos Ulloa, Lynda Weinman, Brendan Dawes, Dr. WooHoo, Peter Elst, Steve Webster, entre muitos outros já escolhidos e por escolher.

Confesso que não estava muito curioso, mas o anúncio conseguiu surpreender-me. Mais surpreendente seria se aparecesse algum português no meio dos oradores… alguém se candidata?

Go Aral, go!

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?

O serviço assenta na ideia de partilhar os seus documentos em apenas 3 passos: enviar o documento, definir as propriedades de acesso, e partilhar.

Algumas das principais características :

• Envio de documentos a um destinatário sem necessidade de os juntar a um email;
• Visualização rápida de todos os documentos partilhados e/ou recebidos;
• Cada documento pode ser acessado através de um link, o que torna possivel disponibilizar um ou mais desses documentos no seu blog, fórum ou site;
• Pode ser criada e disponibilizada uma pré-visualização do seu documento em Flash para incorporar no seu site;
• A visualizaçao e acesso de cada um dos documentos pode ser bloqueada a determinada lista de pessoas;
• Cada utilizador tem 1024 MB (1 GB) de espaço para partilhar os seus documentos.

Junto deste serviço foi também disponibilizada uma API, que se torna muito útil para desenvolver aplicações que possam interagir com a sua conta e os seus documentos.

A Adobe construiu este sistema em Flex, sendo o interface visualmente atractivo e de simples utilização.

Para aceder a este serviço baste ter um Adobe ID, que pode ser conseguido gratuitamente ao efectuar o seu registo no próprio site do Share.

Mais informação:

• Aplicação: https://share.adobe.com
• Documentação oficial: http://labs.adobe.com/technologies/share/
• Documentação da API: http://labs.adobe.com/wiki/index.php/Share:API