Leonardo França » Flash

SharedObject com Flash Media Server

Leonardo França — Tue, 03 Jan 2012 01:24:06 +0000

SharedObject é um recurso que dar ao Flash Player a capacidade de salvar dados localmente para poder ser usado posteriormente em sua aplicação, a grosso modo é como um cookie. Com o Flash Media Server, foi introduzido a possibilidade de usar o SharedObject Remote, no qual os dados são salvos no servidor Flash Media Server e compartilhados para todas as instâncias de uma conexão entre o Flash Player e o Flash Media Server. Isso possibilita a criação de aplicativos em real time como Dashboards, chats e o que mais a imaginação permitir.

O uso do SharedObject Remote pode ser usado de duas maneiras em conjunto com o Adobe Flash Media Server.

Somente pelo lado cliente, através do Flash Player/AIR
Em conjunto com ActionScript Communication, linguagem de servidor do Flash Media Server

Vejamos o primeiro caso:

Através do lado cliente, através do Flash Player/AIR

Caso você não tenha conhecimento para usar a linguagem Server-side do Flash Media Server, é possível utilizar o SharedObject Remote somente pelo ActionScript 3.0. Vamos a um exemplo clássico sharedBall, onde o objetivo é compartilhar as posições da bolinha a atualizar nos outros clientes conectados a mesma instância.

Vá até o diretório de instalação do Flash Media Server e procure pela pasta "applications", lá crie um diretório chamado "sharedBall", dentro dele um arquivo chamado "main.asc"
Abra o main.asc no seu editor de textos de preferencia ou pelo próprio Flash e digite: trace("sharedBall...");
Vamos testar esse arquivo, abra o console do Flash Media Server, geralmente fica localizado no diretorio de instalação/webrrot/swfs. Você pode abrir pelo browser ou o swf diretamente.
Clique no botão "View Applications" e em seguida procure o nome "sharedBall" no combobox logo no canto inferior esquerdo onde está escrito "New Instance..."
Selecione "sharedBall" e deveremos ter na aba Live Log algo como na imagem abaixo:

No Flash, criei uma bola com as ferramentas de desenho e converti para MovieClip dando o nome de "mc_ball".
Estamos prontos para começar a integração entre o Flash e o Flash Media Server. Crie um layer para o ActionScript e abra o editor apertando F9 ou "Window->Actions"
Nosso código começa com a conexão com o servidor Flash Media Server

PLAIN TEXT

ACTIONSCRIPT3:

import flash.net.NetConnection;
import flash.events.NetStatusEvent;
 
var nc:NetConnection;
 
function init():void
{
    nc = new NetConnection();
    nc.addEventListener(NetStatusEvent.NET_STATUS, handlerNetStatus);
    nc.connect("rtmp://localhost/sharedBall");
}
 
function handlerNetStatus(evt:NetStatusEvent):void
{
    trace(evt.info.code);
}
 
init();

Feito isso, podemos testar o swf apertando Ctrl+Enter, se tudo correr bem, deveremos ter a seguinte mensagem no output do Flash:

NetConnection.Connect.Success

Com a conexão feita, podemos instanciar o nosso SharedObject Remote para compartilhar as posições de x e y da bolinha.

PLAIN TEXT

ACTIONSCRIPT3:

if(evt.info.code == "NetConnection.Connect.Success")
    {
        so = SharedObject.getRemote("so",nc.uri,false);
        so.addEventListener(NetStatusEvent.NET_STATUS, handlerNetStatus);
        so.addEventListener(SyncEvent.SYNC, handlerSync);
        so.connect(nc);
    }

O handlerSync é responsável por atualizar os dados de x e y pegaremos do SharedObject Remote:

PLAIN TEXT

ACTIONSCRIPT3:

function handlerSync(evt:SyncEvent):void
{
    mc_ball.x = so.data.x;
    mc_ball.y = so.data.y;
}

Daremos a opção de ao clicar na bolinha, que ela possa ser arrastável, em seguida atualizaremos as posições de x e y no SharedObject Remote:

PLAIN TEXT

ACTIONSCRIPT3:

mc_ball.addEventListener(MouseEvent.MOUSE_DOWN, handlerSharedBall);
mc_ball.addEventListener(MouseEvent.MOUSE_UP, handlerSharedBallOut);
 
function handlerSharedBall(evt:MouseEvent):void
{
    this.addEventListener(Event.ENTER_FRAME, update);
    mc_ball.startDrag();
}
 
function handlerSharedBallOut(evt:MouseEvent):void
{
    mc_ball.stopDrag();
}
 
function update(evt:Event=null):void
{
    so.setProperty("x",mc_ball.x);
    so.setProperty("y",mc_ball.y);
}

Segue o código completo:

PLAIN TEXT

ACTIONSCRIPT3:

import flash.net.NetConnection;
import flash.events.NetStatusEvent;
import flash.net.SharedObject;
import flash.events.SyncEvent;
import flash.events.MouseEvent;
import flash.events.Event;
 
var nc:NetConnection;
var so:SharedObject;
 
function init():void
{
    nc = new NetConnection();
    nc.addEventListener(NetStatusEvent.NET_STATUS, handlerNetStatus);
    nc.connect("rtmp://localhost/sharedBall");
}
 
function handlerNetStatus(evt:NetStatusEvent):void
{
    trace(evt.info.code);
    if(evt.info.code == "NetConnection.Connect.Success")
    {
        so = SharedObject.getRemote("so",nc.uri,false);
        so.addEventListener(NetStatusEvent.NET_STATUS, handlerNetStatus);
        so.addEventListener(SyncEvent.SYNC, handlerSync);
        so.connect(nc);
    }
}
 
function handlerSync(evt:SyncEvent):void
{
    mc_ball.x = so.data.x;
    mc_ball.y = so.data.y;
}
 
mc_ball.addEventListener(MouseEvent.MOUSE_DOWN, handlerSharedBall);
mc_ball.addEventListener(MouseEvent.MOUSE_UP, handlerSharedBallOut);
 
function handlerSharedBall(evt:MouseEvent):void
{
    this.addEventListener(Event.ENTER_FRAME, update);
    mc_ball.startDrag();
}
 
function handlerSharedBallOut(evt:MouseEvent):void
{
    mc_ball.stopDrag();
}
 
function update(evt:Event=null):void
{
    so.setProperty("x",mc_ball.x);
    so.setProperty("y",mc_ball.y);
}
 
init();

Veja uma demostração em funcionamento:

Compre o Arquivo fonte de exemplo por R$4,99

Mais códigos e PDFs clique aqui.

Usando a API de atualização do Adobe AIR

Leonardo França — Thu, 18 Aug 2011 21:10:50 +0000

Uma das funcionalidade que mais me foi útil no Adobe AIR, foi a adição de uma API mais bem elaborada para fazer atualização automatica de meus aplicativos. Isso pode ser muito importante porque nem todos os usuários tem tempo(ou vontade) de voltar no site do aplicativo para baixar a última versão.
Isso já é rotina para sistemas operacionais e softwares que usamos no dia-a-dia como o Mozilla Firefox e o Google Chrome(que nem pede permissão para atualizar né senhor Google).

A partir do Adobe AIR 1.5, temos a classe ApplicationUpdater e ApplicationUpdaterUI que tem como objetivo, definir o básico de funcionalidade de atualização para os aplicativos feitos com Adobe AIR

Gerenciar as atualizações pode ser complicado e o AIR update framework possui as API's necessarias para que você faça isso de maneira prática e funcional. O desenvolvedor pode por exemplo:

Verificar atualizações por intervalo de tempo ou por requisição do usuário.
Baixar os arquivos de atualização da web
Avisar o usuário na primeira execução do software recém-instalado
Confirmar se o usuário deseja verificar se há atualizações
Exibir informações sobre a nova versão de atualização para o usuário
Exibir o status do download ou informação de erro para o usuário

As informações são obtidas a partir de arquivos XML onde você diz qual a última versão do software, as novidades da nova versão etc. Vamos a um exemplo prático, no caso usarei o Flash Builder que já deve ter os arquivos applicationupdater.swc e applicationupdater_ui.swc como referencia na biblioteca.
Começamos pelo xml chamado updateConfig.xml, que "dira" a seu aplicativo onde estão os arquivos para atualização.

PLAIN TEXT

XML:

 version="1.0" encoding="utf-8"?> 
 xmlns="http://ns.adobe.com/air/framework/update/configuration/1.0"> 
     >http://localhost:81/leonardofranca/air/updates/testeUpdate/updateDescriptor.xml> 
    >1> 
>

Ele deve ser salvo no mesmo diretorio da sua aplicação, junto com os outros arquivos xml e swf. Agora no Flex, instanciaremos a classe ApplicationUpdateUI e setaremos o arquivo xml de configuração para que o Flex possa saber onde está a atualização.

PLAIN TEXT

ACTIONSCRIPT3:

var appUpdater:ApplicationUpdaterUI = new ApplicationUpdaterUI();
appUpdater.configurationFile = new File("app:/updateConfig.xml");
appUpdater.initialize();
 
//via ActionScript
//appUpdater.updateURL = " http://example.com/updates/update.xml"; 
//appUpdater.delay = 1;

O arquivo updateDescriptor.xml é onde fica setado a versão em si da atualização do seu aplicativo e onde você pode colocar a descrição das novidades da atualização.

PLAIN TEXT

XML:

 version="1.0" encoding="utf-8"?> 
      xmlns="http://ns.adobe.com/air/framework/update/description/2.5"> 
       >0.0.2> 
       >http://localhost:81/leonardofranca/air/updates/testeUpdate/testeUpdate_0.0.2.air> 
       >
This version has fixes for the following knowns issues:
*First issue
*Second issue  
  ]]>>
    >

Basicamente é isso, vamos só implementar a chamada para que ao abrir o aplicativo, ele verifique se existe atualização.

PLAIN TEXT

MXML:

"1.0" encoding="utf-8"?>
 xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="windowedapplication1_creationCompleteHandler(event)">
    >
        [CDATA[
            import air.update.ApplicationUpdaterUI;
            import air.update.events.UpdateEvent;
            
            import mx.events.FlexEvent;
            
            private var appUpdater:ApplicationUpdaterUI;
            
            protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
            {
                appUpdater = new ApplicationUpdaterUI();
                appUpdater.configurationFile = new File("app:/updateConfig.xml");
                appUpdater.addEventListener(ErrorEvent.ERROR, onError);
                appUpdater.addEventListener(UpdateEvent.INITIALIZED, handlerInit);
                appUpdater.initialize();
                
                
                //via ActionScript
                //appUpdater.updateURL = " http://example.com/updates/update.xml"; 
                //appUpdater.delay = 1;
                
            }
            
            protected function onError(event:ErrorEvent):void
            {
                trace(event.text);              
            }
            
            protected function handlerInit(event:UpdateEvent):void
            {
                appUpdater.checkNow();
            }
            
        ]]>
    >
    >
        
    >
>

Criei uma segunda versão do meu aplicativo de teste para demonstração, deveremos ter o seguinte resultado:

Clique para ampliar

Caso o usuário queira verificar se existe alguma atualização do aplicativos, basta clicar no botão "check for upadates. O arquivo atualizado é baixado e instalado.

Clique para ampliar

Referências:
http://help.adobe.com/en_US/air/build/WS9CD40F06-4DD7-4230-B56A-88AA27541A1E.html
http://www.adobe.com/devnet/air/flex/quickstart/articles/update_framework.html

Adobe LiveCycle Collaboration Service

Leonardo França — Sun, 31 Jul 2011 19:27:41 +0000

A Adobe lançou um serviço anteriormente conhecido com o codinome de Cocomo(Common Collaboration Model), logo em seguida passou a se chamar Adobe Flash Collaboration Service e agora é oficialmente parte da família LiveCycle, sendo chamado de Adobe LiveCycle Collaboration Service.
O LCCS tem como objetivo funcionar como um SAAS(Software as a Service) para simplificar e facilitar o desenvolvimento de aplicativos RIA baseados em multimidia. Permite que os arquitetos e desenvolvedores possam criar experiências de usuário mais envolvente e mais dinâmicas oferecendo suporte a multi-user, colaboração em real time para novos ou já existentes aplicativos RIA.

Alguns destaques:

Facilmente integrar chat, whiteboard, webcam e VoIP.
Desenvolver e implementar rapidamente aplicações com um SDK bem completo e com muito exemplos.
Bibliotecas para Adobe Flash e Flash Builder, para rodar no Flash Player 9 ou Flash Player 10(Alguns recursos como P2P só funcionam a partir do Flash Player 10).
Gerenciar usuários e os dados da sessão.
Construir suas aplicações em nuvem

Para começar a usar o LCCS, basta acessar o portal LCCS Developer Portal e entrar com seu login ou cadastrar-se. O portal serve para você administrar instancias das suas aplicações, você pode acompanhar o número de conexões, banda usada etc.

Modelo de cobrança
LCCS tem 3 diferentes metodos para cobrança:

Live Stream Bandwidth - $0.49 per GB
Push Messages - $0.10 per 1000 messages
User Minutes - $0.01 per Hour

Leia o FAQ para mais detalhes. Você tem uma cota free e pode usar até 15 dolares por mês.

Referencias:
http://www.flashrealtime.com/livecycle-collaboration-service-pricing/
https://portal.collaboration.adobelivecycle.com/

Usando Acelerômetro com Adobe AIR for iOS

Leonardo França — Sat, 14 May 2011 01:15:26 +0000

O iPhone possui uma variedade grande de jogos e aplicativos que utilizam o recurso do acelerômetro. Dentre alguns recursos disponiveis que o Adobe AIR pode acessar, o acelerômetro está entre um deles, podendo acessar os dados dos eixos X, Y e Z.

O exemplo utilizado é o mesmo que consta no artigo para uso do acelerômetro com AIR for Android e que foi baseado do exemplo de uso do acelerômetro com Flash Lite 4.0.

Veja o resultado: Usando Acelerômetro com Adobe AIR for iOS

Baixe o fonte
DOWNLOAD

Acessando a camera do celular com Adobe AIR for Android

Leonardo França — Sat, 07 May 2011 04:30:29 +0000

O Adobe AIR for Android pode acessar alguns recursos do hardware dos smartphones. Dentre alguns deles podemos citar o acesso a internet, ler o estado do telefone, o acesso da rede, o acesso da wifi, GPS, sensores etc. O Adobe AIR pode acessar também a camera do dispositivo, sendo que isso pode ser feito de duas maneiras.

O Adobe AIR está disponivel para dispositivos rodando Android a partir da versão 2.2(Froyo)

Temos duas classes para acessar a camera com Adobe AIR for Android:

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/media/Camera.html
A primeira maneira de acessar a câmera do celular é usando a classe Camera, clássica e já bastante conhecida de nossos trabalhos em ambiente web e desktop. Antes você pode usar o método Camera.isSupported, e para pegar as câmeras usando Camera.getCamera().

Geralmente essa classe é usada também para enviar o streaming de sua câmera para o servidor Flash Media Server(em conjunto com a classe NetStream) e transmitir para web, desktop ou mobile. Veja um exemplo de uso:

PLAIN TEXT

ACTIONSCRIPT3:

var camera:Camera = Camera.getCamera();
if (camera != null)
{
video = new Video(camera.width * 2, camera.height * 2);
video.attachCamera(camera);
addChild(video);
}
else
{
trace("You need a camera.");
}

No getCamera, se não for passado nenhum parâmetro, acessará a camera principal do dispositivo, você pode acessar uma câmera especifica passando o índice dela como string:

PLAIN TEXT

ACTIONSCRIPT3:

var arrCamera:Array = Camera.names;// todas as câmeras como array
var camera:Camera = Câmera.getCamera(“1”);//acessando a câmera de indece 1

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/media/CameraUI.html
CameraUI é uma classe nova exclusiva para o Adobe AIR for Mobile Devices, permitindo que você capture a imagem ou vídeo do aplicativo padrão de câmera do celular. A imagem ou video fica disponivel no objeto MediaEvent. Veja um exemplo de uso:

PLAIN TEXT

ACTIONSCRIPT3:

var deviceCameraApp:CameraUI = new CameraUI();
var imageLoader:Loader; 
 
deviceCameraApp.addEventListener( MediaEvent.COMPLETE, imageCaptured );
                deviceCameraApp.addEventListener( Event.CANCEL, captureCanceled );
                deviceCameraApp.addEventListener( ErrorEvent.ERROR, cameraError );
                deviceCameraApp.launch( MediaType.IMAGE );
 
function imageCaptured( event:MediaEvent ):void
          {
               trace( "Media captured..." );
       
               var imagePromise:MediaPromise = event.data;
       
               if( imagePromise.isAsync )
               {
                trace( "Asynchronous media promise." );
                imageLoader = new Loader();
                imageLoader.contentLoaderInfo.addEventListener( Event.COMPLETE, asyncImageLoaded );
                imageLoader.addEventListener( IOErrorEvent.IO_ERROR, cameraError );
                
                imageLoader.loadFilePromise( imagePromise );
               }
               else
               {
                trace( "Synchronous media promise." );
                imageLoader.loadFilePromise( imagePromise );
                showMedia( imageLoader );
               }
          }
 
function captureCanceled( event:Event ):void
          {
               trace( "Media capture canceled." );
               NativeApplication.nativeApplication.exit();
          }
    
          function asyncImageLoaded( event:Event ):void
          {
               trace( "Media loaded in memory." );
               showMedia( imageLoader );    
          }
    
          function showMedia( loader:Loader ):void
          {
               this.addChild( loader );
          }
      
          function cameraError( error:ErrorEvent ):void
          {
               trace( "Error:" + error.text );
               NativeApplication.nativeApplication.exit();
          }

Um ultimo detalhe para que funcione no smartphone, é necessario setar a permissão para que o aplicativo possa acessar a camera no Android. Isso é feito no xml de configuração do Adobe AIR:

PLAIN TEXT

XML: