Posso dizer que, de início, pensamos em colocar um limite de 100 pessoas no evento, mas depois pensamos que a procura não iria ser muita, uma vez que no último encontro eramos apenas… três pessoas!

No entanto, lá nos aventuramos em colocar o limite de 70 + 10 speakers e a aposta foi ganha! No final, e totalizando toda a gente, eramos 67 pessoas juntas no evento!

O que correu bem?

• O almoço

- Eramos cerca de doze pessoas e foi interessante falar das expectativas sobre o evento, de conversar com pessoas com quem não tivemos hipótese de trocar ideias noutros eventos, etc. O lombo estava bom e mesmo a queimar as duas, lá conseguimos pagar todos e lá fomos para o local onde ia decorrer o evento.

• O evento

- Como todos notaram, o evento começou com cerca de vinte minutos de atraso. Não havia problema se ninguém se esticasse nas apresentações (o que não foi o caso!).

- Uma coisa a referir foi o espírito de todos! Durante as cerca de cinco horas em que tivemos no edifício Maus Hábitos houve sempre um bom convívio, as piadas típicas dos apresentadores ao qual a plateia correspondia sempre com umas gargalhadas. O que dizer do Luís Martins que arranjou um milagroso projector porque o nosso era “esverdeado”.

• O jantar

Depois de tantas horas no evento, que bem que soube comer umas belas pizzas de… 50 centímetros, no S. Marino! Eramos também cerca de doze pessoas e o convívio foi muito interessante, dando para trocar ideias e falar sobre o que se passou no evento, sobre as novas tecnologias, experiências que tenhamos tido, etc. Tudo acabou, por volta da uma da manhã no Rivolli, onde decorria o Fantasporto.

• Conclusões

Como nunca nada corre perfeito, temos noção que houve várias falhas, mas todas elas devido à pouca experiência que os organizadores tinham em realizar eventos.

1. O local – Embora o local fosse interessante, era notório a falta de condições para a projecção dos conteúdos através do projector. O facto de ter ficado muito escuro a partir do meio do evento, fez com que o público quase não conseguisse ver os speakers.
2. Talvez devêssemos ter apenas uma refeição em conjunto. Assim, podíamos tentar ter mais pessoas no mesmo espaço;
3. O controlo do tempo. Esta sim, uma falha um pouco grave, umas vez que perdemos completamente a noção do tempo;

Apresentações:

Ainda não consegui que os vídeos ficassem todos disponíveis uma vez que temos limite, tanto no Vimeo, como no Youtube, de tempo para os vídeos (só dá para 10 minutos em cada).

No entanto, já podem ver o vídeo de introdução do evento aqui

Sendo assim, ficam aqui as apresentações que já nos foram facultadas pelos speakers. Quando me enviarem mais, actualizarei aqui o post

Mauro Martins:

Web – Construir é diferente de ver

Nuno Gomes:

HTML 5, a Realidade da Utopia

Miguel Pinto:

Zend Framework e Flash

Felipe Ávila:

The Usability Page

Cumprimentos a todos, e preparem-se porque vêm aí mais!

Marca desde já essa data na agenda e prepara-te para passar uma tarde bem disposta juntamente com pessoas que partilham contigo interesses e paixões pela Internet e não só!

Vamos ter speakers a abordar temas de elevado interesse da actualidade que te vão deixar com água na boca para aprender, explorar e procurar as inovações para o design e desenvolvimento das tuas aplicações!

O universo de desenvolvimento de aplicações web está em perfeita erupção! Não são só as tecnologias cliente, mas toda a “pilha” de desenvolvimento com as suas diversas tecnologias, linguagens e ferramentas está a ser posta em causa e cada um quer encontrar o seu nicho nesta realidade. Não perca esta oportunidade de ouvir alguns experts  portugueses na área do desenvolvimento de Rich Internet Applications.

Como se isto não fosse suficiente ainda vamos ter prémios para distribuir pelo pessoal que estiver a assistir que vão desde licenças de software a vouchers de cursos de formação e outros.

Não percam! Dia 6 de Março, no Edifício “Maus Hábitos”, às 14:00, e sim, no Porto!

Inscreve-te em: http://riapt.stagehq.com/events/182/booking/new

Agenda

Quando se fala em trigonometria geralmente é associada por grande parte a um “bicho daqueles maus” com cosenos, senos e mais um monte de fórmulas.
A verdade é que nos mais variados problemas é constante termos que aliar o actionscript com este ramo da matemática.

- PI:

É um numero irracional, eu normalmente uso apenas a aproximação com duas casas decimais 3,14. O record actualmente do numero mais aproximado é de Fabrice Bellard — um programador, claro!

Mas o que é visualmente este valor PI?

Importa saber que se fizermos um circulo perfeito com um raio de 1 unidade usando por exemplo uma corda, se esticarmos essa corda numa linha recta vamos ver que ela mede 2*PI. Portanto, metade da corda mede PI — um valor aproximado a 3.14159 26535 89793 23846 26433 83279 50288 4197 …. unidades! É a mesma coisa que dizer que o raio cabe PI vezes no arco de meia circunferência (um arco de circunferência de 180 graus).

- Está bem, pronto.. já gravei o que é o PI e agora o que faço com ele?

As funções Math.cos, Math.sin e outras no actionscript aceitam como parâmetro uma variável em radianos, esta variável indicam uma amplitude, um ponto especifico do nosso circulo.

A definição de Radiano

“O ângulo definido no centro de um círculo por um arco de circunferência com o mesmo comprimento que o raio do círculo é 1 radiano”
Ou seja, dizer que o raio do circulo “cabe” n vezes numa determinada parte do arco pode-se simplificar e dizer simplesmente que essa parte mede “n” radianos

Num sistema de coordenadas no plano cartesiano centrando um circulo com uma unidade de raio, fixa-se o ponto (a) mais à direita do circulo e mede-se o arco em sentido contrário ao sentido dos ponteiros do relógio obtendo um segundo ponto (b);
- a medida do arco entre os dois pontos “n radianos” (a verde), corresponde o parâmetro que usamos no coseno e no seno (entre outras funções do actionscript).

Seno

- traça-se uma recta paralela ao eixo dos xx’s que passa pelo ponto b e vai interceptar o eixo dos yy’s obtendo o valor do seno para “n radianos” (a laranja)

Coseno

- traça-se uma recta paralela ao eixo dos yy’s que passa pelo ponto b e que vai interceptar o eixo dos xx’s obtendo o valor do coseno para “n radianos” (a azul)

Isto é a parte chata da coisa, mas é o suficiente para fazermos milhares e milhares de cenas espectaculares .

Problema 1:

- Desenhar os pontos referentes às horas de um relógio analógico com raio de 80 pixeis e centro no ponto (200,122)

Resposta:

Sabemos que um circulo tem um arco de 2*PI, queremos dividir em 12 partes, portanto vamos ter 2*PI/12 como a medida de cada arco.
A partir daqui podemos passar estes arcos para coordenadas x,y usando o coseno e o seno.
Como queremos um raio maior que uma unidade temos que multiplicar os valores obtidos pelo novo raio desejado.

var arco_hora:Number=Math.PI*2/12;// simplificando Math.pi/6
var raio:Number=80;//raio do nosso relogio
this.graphics.lineStyle(4,0xff0000);//vamos por os pontos vermelhos

for (var i:int=0;i<12;i++)
{
var posx:Number=Math.cos(arco_hora*i)*raio;
var posy:Number=Math.sin(arco_hora*i)*raio;
this.graphics.drawCircle(posx,posy,4);
}

Ok, mas isto ficou no ponto (0,0), agora é necessário fazer uma translação para a posição final.

var arco_hora:Number=Math.PI*2/12;// simplificando Math.pi/6
var raio:Number=80;//raio do nosso relogio
var centro:Point=new Point(200,122);//posição central do relógio
this.graphics.lineStyle(4,0xff0000);//vamos por os pontos vermelhos

for (var i:int=0;i<12;i++)
{
var posx:Number=Math.cos(arco_hora*i)*raio+centro.x;
var posy:Number=Math.sin(arco_hora*i)*raio+centro.y;
this.graphics.drawCircle(posx,posy,4);
}

Desafio:

- Desenhar os ponteiros

Dica: Assim por alto podemos por um TIMER de 1000 e no evento TimerEvent.TIMER obtemos a hora e actualizamos os ponteiros.
Os ponteiros podem ser desenhados com

graphics.lineStyle(4,0xff0000);
graphics.moveTo(centro.x, centro.y);
graphics.lineTo(posx, posy);


Cuidados:

O coseno e seno são funções pesadas, o processador queixa-se se quando os usamos intensamente como por exemplo em sistemas de partículas.
Por isso uma leitura a este post do Michael Baczynski é recomendada.

Obrigado,
Paulo Afonso (semmais)
http://www.semmais.com/

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]

Este ano, os vencedores foram o Nuno Morgadinho, Paulo Afonso e Jorge Varandas com a aplicação SUPOND The Idea – “Apple Time Machine”-like interface to your Lifestream

A aplicação é uma adaptação do time machine da Apple utilizado as APIs do novo serviço da SAPO – POND onde visualizamos a nossa timeline de conteúdos provenientes de vários serviços com um aspecto 3D, não recorrendo a Papervision3D mas às APIs 3D nativas do Flash Player.

O projecto foi desenvolvido em Flash Builder e Flash CS4, resultando numa aplicação web e desktop via AIR.

Mais informações na página oficial do Nuno.

Introdução:

Esta é a primeira parte de uma série de três tutoriais que vou colocar sobre a integração de Flex com AIR e SQLite. A primeira (esta) vai centrar-se em uma breve introdução ao AIR com SQLite e vamos criar uma aplicação onde vamos adicionar uma base de dados local, inserir vários tipos de dados e depois coloca-los directamente em uma datagrid em Flex.

A parte dois que será colocada mais tarde (estou a trabalhar nela) será centrada em criar uma form para adicionar dinamicamente informação à base de dados e em colocar várias tabelas a interagirem entre si em que a primeira tem dados e a segunda possui várias informações relativas aos items anteriores.

A terceira será depois a integração das chamadas da base de dados com itemClasses e também ValueObjects.

Espero que gostem! Mauro.

Parte I

Sem dúvida que se há uma coisa que o Adobe AIR tem de interessante é a capacidadede ser possível criar base de dados locais sem a necessidade de nenhum servidor local como o wamp ou semelhante e com extrema facilidade.

Ter a possibilidade de inserir, actualizar e retirar informação de uma estrutura de base de dados é sem dúvida mais fácil de gerir do que, por exemplo, a utilização de ficheiros de texto ou então ficheiros com estruturas em XML como por vezes acontece.

Este tipo de interactividade entre o Flex ou Flash com estas estruturas permitem-nos fazer relações entre várias tabelas, podendo assim associar facilmente dados que poderão estar organizados nas famosas sequências “one-to-many” (uma entrada na tabela TAB_1 tem várias entradas associadas na tabela TAB_2). Isto torna a injecção de dados em componentes de Flex ou Flash numa acção simples e quase directa.

Para começar a utilizar este tipo de estrutura e para podermos ter qualquer interacção com uma base de dados em SQLite através do AIR, são precisos ,no mínimo, três elementos: um ficheiro (base de dados), uma conexão e uma declaração (query).

Este tutorial vai ser constituído por três partes sendo a primeira mais simples, com criação, adição e preenchimento de uma dataGrid em Flex. A segunda parte do tutorial terá também relação entre mais que uma tabela na mesma base de dados (relações on-to-many) e mais tarde, vamos utilizar itemClasses para termos um mapeamento perfeito e mais correcto da nossa aplicação.

Passando ao código..

// Criamos uma variável que vai guardar a referencia ao nosso ficheiro de base de dados
private var dbFile:File;

// Criamos uma nova conexão e abrimos o ficheiro que contem a base de dados
private var conn:SQLConnection;

// Método init para iniciar as nossas variáveis e associar-lhes valores
private function init () : void {
    dbFile = File.applicationStorageDirectory.resolvePath(“employees.db”);
    conn = new SQLConnection();
    conn.open(dbFile);
    createDataBase();
    insertDataBase();
    selectDataBase();
}

// Primeiro criamos a nossa base de dados local
private function createDataBase() : void
{
    // Criamos a variável que vai executar a nossa query, atribuimos a nossa conexão, e criamos a query para depois executar
    var statement : SQLStatement = new SQLStatement();
    statement.sqlConnection = conn;
    statement.text = “CREATE TABLE employees (empId INTEGER PRIMARY KEY AUTOINCREMENT, empName VARCHAR(255))”;
    statement.execute();
}

Da mesma forma que é fácil criar uma base de dados, também é fácil adicionarmos conteúdo à mesma bastanto quase copiar o código anterior mudando apenas a nossa query.

private function insertDataBase():void
{
    var dbStatement:SQLStatement = new SQLStatement();
    dbStatement.sqlConnection = conn;
    dbStatement.text = “INSERT INTO employees (empName) VALUES (:empName)”;
    dbStatement.parameters[ ":empName" ] = “António”;
    dbStatement.execute();
}

Agora que já temos conteúdo, podemos ir buscá-lo através de um SELECT à base de dados

private function selectDataBase():void
{
    var dbStatement:SQLStatement = new SQLStatement();
    dbStatement.sqlConnection = conn;

    dbStatement.text = “SELECT * FROM employees”;
    dbStatement.execute();

    // Se quiserem ver o resultado da vossa query…
    var ac:ArrayCollection = new ArrayCollection(dbStatement.getResult().data);
    var acLength : Number = ac.length;
    for ( var i:uint; i < acLength; i++ )
    {
        trace( ac[i].empId + ” – ” + ac[i].empName );
    }

}
Já temos aqui uma primeira base mas ainda nos falta controlar várias acções, nomeadamente controlar a execução dos eventos e ter a certeza que estes ocorrem correctamente e só acedemos aos dados quando estes são recebidos / inseridos na nossa aplicação.

Exemplo:

Passando para um exemplo mais concreto, temos, nesta parte I deste tutorial, uma lista de trabalhadores de uma empresa que está guardada em uma base de dados SQLite.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml”
                        layout=”absolute”
                        creationComplete=”init()”>

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            // Variável que vai ter a informação para o array e que bind para a nossa datagrid
            [Bindable]
            private var empArray : ArrayCollection;

            // Variáveis de conexão
            private var dbFile : File;
            private var conn : SQLConnection;
            private var dbStatement : SQLStatement;

            // Variáveis para controlar as nossas queries
            private var empNames : Array = new Array( “António Amaro”, “Marco Silva”, “Luis Ribeiro”, “Salvador Mesquita”, “Lourenço Pinto”, “João Guimarães” );
            private var empLoc : Array = new Array( “Financeira”, “Desenvolvimento”, “Recursos Humanos”, “Transportes”, “Desenvolvimento”, “Vendas” );
            private var empTel : Array = new Array( “351″, “456″, “745″, “860″, “254″, “555″ );
            private var empPos : Number = 0;

            /**
             * INIT
             */
            private function init() : void
            {
                // Criamos a referência para o nosso ficheiro
                dbFile = File.applicationStorageDirectory.resolvePath( “employees.db” );

                // Criamos uma nova conexão que nos vai ligar à base de dados
                conn = new SQLConnection();

                // Se a base de dados existe abrimos, senão criamos uma nova
                // Dependendo da acção atribuimos diferentes listeners para invocarmos diferentes métodos
                if ( !dbFile.exists )
                {
                    conn.addEventListener( SQLEvent.OPEN, connOpen );
                } else
                {
                    conn.addEventListener( SQLEvent.OPEN, selectDataBase );
                }
                // Abrimos a base de dados
                conn.open( dbFile );
            }

            /**
             * connOpen
             */
            private function connOpen( e : SQLEvent ) : void
            {
                // abriu a conexão, vai então criar a base de dados
                createDataBase();
            }

            /**
             * createDataBase
             */
            private function createDataBase() : void
            {
                // Criamos a variável que vai executar a nossa query, atribuimos a nossa conexão, e criamos a query para depois executar
                dbStatement = new SQLStatement();
                dbStatement.sqlConnection = conn;
                dbStatement.addEventListener( SQLEvent.RESULT, insertEmpNames, false, 0, true );
                dbStatement.text = “CREATE TABLE employees (empId INTEGER PRIMARY KEY AUTOINCREMENT, empName VARCHAR(255), empLoc VARCHAR(255), empTel INTEGER)”;
                dbStatement.execute();
            }

            /**
             * insertEmpNames
             */
            private function insertEmpNames( e : SQLEvent ) : void
            {
                // Depois de criada a base de dados vamos preencher informação
                insertDataBase();
            }

            /**
             * insertDataBase
             */
            private function insertDataBase() : void
            {

                dbStatement = new SQLStatement();
                dbStatement.sqlConnection = conn;

                // Vamos inserindo novos elementos à base de dados até percorrermos todo o nosso array
                if ( empPos < empNames.length – 1 )
                {
                    dbStatement.addEventListener( SQLEvent.RESULT, insertEmpNames, false, 0, true );
                } else
                {
                    dbStatement.addEventListener( SQLEvent.RESULT, selectDataBase, false, 0, true );
                }

                // Agora vamos adicionar para cada campo, um objecto com o valor que queremos inserir na tabela
                dbStatement.text = “INSERT INTO employees (empName, empLoc, empTel) VALUES (:empName, :empLoc, :empTel)”;
                dbStatement.parameters[ ":empName" ] = empNames[ empPos ];
                dbStatement.parameters[ ":empLoc" ] = empLoc[ empPos ];
                dbStatement.parameters[ ":empTel" ] = empTel[ empPos ];
                empPos++;
                dbStatement.execute();

            }

            /**
             * selectDataBase
             */
            private function selectDataBase( e : SQLEvent ) : void
            {
                dbStatement = new SQLStatement();
                dbStatement.sqlConnection = conn;
                dbStatement.addEventListener( SQLEvent.RESULT, attribDataGrid, false, 0, true );

                // Depois de inseridos todos os registos vamos seleccionar tudo que está na base de dados
                dbStatement.text = “SELECT * FROM employees”;
                dbStatement.execute();
            }

            private function attribDataGrid( e : SQLEvent ) : void
            {
                // Vamos buscar o valor retornado pela base de dados e colocar directo num array collection
                empArray = new ArrayCollection( dbStatement.getResult().data );
            }
        ]]>
    </mx:Script>

    <mx:Panel width=”100%”
              paddingTop=”10″
              paddingBottom=”10″
              paddingLeft=”10″
              paddingRight=”10″
              title=”TRABALHADORES DA SOFT S.A.”>

        <mx:DataGrid width=”100%”
                     dataProvider=”{empArray}”>
            <mx:columns>
                <mx:DataGridColumn headerText=”Nome”
                                   dataField=”empName”/>
                <mx:DataGridColumn headerText=”Departamento”
                                   dataField=”empLoc”/>
                <mx:DataGridColumn headerText=”Telefone”
                                   dataField=”empTel”/>
            </mx:columns>
        </mx:DataGrid>
    </mx:Panel>

</mx:WindowedApplication>

Como podem ver, é bem simples criamos um sistema de base de dados que a cria, adiciona e mostra os resultados para uma datagrid. Como disse mais a cima, na parte dois do tutorial vamos avançar para relações entre várias tabelas na mesma base de dados para podermos associar a um só item de uma tabela, várias informações de outra.

NOTA: Se quiserem ir testando a criação dos ficheiros de base de dados e não conseguem porque a base de dados já está criada podem apagar “à mão” os ficheiros que ficam guardados no vosso computador.

WINDOWS: C:\Users\<user>\AppData\Roaming

MAC: <user>\Libraries\preferences\

Podem descarregar o projecto aqui:

download do ficheiro

Para mais informações sobre SQLite no AIR:
http://coenraets.org/blog/2008/02/sqlite-admin-for-air-10/
http://livedocs.adobe.com/flex/3/langref/localDatabaseSQLSupport.html

Uma ferramenta muito boa para poderem ver o que vai acontecendo e a estrutura da vossa base de dados, eu aconselhava a instalarem o Lita que foi referenciado num anterior post meu sobre As melhores aplicações AIR para Designers e Developer.

Até à próxima e espero que tenham gostado!

Mauro Martins.

Aceitam-se comentários

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.