Leonardo França

Desenvolvendo games para Nintendo Wii com Adobe Flash

Leonardo França — Thu, 02 Sep 2010 06:45:24 +0000

O Nintendo Wii é um dos consoles mais populares da atualidade, com seu controle até então inovador para época de seu lançamento, se tornou um video game "para família" e para varias utilidades. Hoje o Nintendo Wii é usado em varias partes do mundo não somente para diversão, mas também em aréas como fisioterapia para recuperação de pacientes

Hoje o Nintendo Wii é usado em varias partes do mundo não somente para diversão, mas também em aréas como fisioterapia para recuperação de pacientes

Bom, sabemos que é possivel desenvolver em Flash para o Nintendo Wii, mas precisamos observar alguns detalhes primeiro. Vejamos a especificação do Flash Player para o Nintendo Wii que consta no Adobe Device Central CS5.

Especificação Flash Player no Nintendo Wii

Note que teremos que trabalhar com o Flash Player 7, mas no site da Nintendo consta que pode ser atualizado para o Flash Player 8, e o aplicativo rodará pelo browser do Wii, seu browser é uma versão do Opera feita exclusivamente para o Wii.
Wikipedia diz que o Flash Player foi atualizado para o Adobe Flash Lite 3.1, que corresponde ao Flash Player 8 com algumas features do Flash Player 9. Mas eu criei um arquivo Flash Player 9 com ActionScript 2.0 e funcionou, criei um arquivo Flash Player 9 com ActionScript 3.0 e não funcionou, criei um Flash Lite 3.1 e funcionou. Fiquei com Flash Player 9 e ActionScript 2.0 para meus testes.(System.capabilities.version mostra AFL 9,1,122,0)

Vamos fazer um primeiro exemplo para ver como fica o funcionamento do Flash Player com o Wii Remote.

Crie um novo arquivo do tipo ActionScript 2.0 e logo em seguida, coloque o filme para compilar no Flash Player 8 ou 9. Ou pode fazer isso diretamente pelo Adobe Device Central CS5, que deixa tudo configurado para você, inclusive com o tamanho ideial para rodar no navegador do Wii.
O objetivo desse exemplo é avaliar o funcionamento dos botões do Wii Remote, criaremos um simbolo do tipo MovieClip.
Insira o seguinte código no MovieClip para que nosso simbolo possa ser arrastado pelo Wii Remote:
PLAIN TEXT
ACTIONSCRIPT:
1. onClipEvent(mouseDown)
2. {
3. this.startDrag();
4. }
5. onClipEvent(mouseUp)
6. {
7. this.stopDrag();
8. }

Pelo que pude perceber, somente nos eventos de mouse que podemos utilizar no Nintendo Wii, não foi possivél usar os outros botões e o direcional pad.
Você pode testar o exemplo abrindo a seguinte URL no navegador do Wii http://www.leonardofranca.com.br/wii ou veja no video abaixo.

Apesar da limitação de só usar eventos do mouse, dá pra fazer aplicativos bem interessantes em Flash para Nintendo Wii. Deixo um link com alguns games para Nintendo Wii feitos em Flash.
http://www.eiksoft.com/wii/index.htm

Para saber mais:
Documentação ActionScript 2.0

Aproveite e compre seu Nintendo Wii
Nintendo Wii com Jogo Wii Sports

Lazy Loading com Adobe Flex e BlazeDS

Leonardo França — Tue, 31 Aug 2010 11:01:55 +0000

BlazeDS é uma implementação feita em Java para se trabalhar com o protocolo AMF(Action Message Format) e facilitar a comunicação entre o swf e seu server-side em Java.
Quando você começa a utilizar um recurso diferentemente da maioria das pessoas, pode achar algums problemas dificeis de resolver. Com Java e Flex o velho problema é o Lazy Loading, que ja foi assunto de varias discurssões entre eu e o Wenderson. Eu deixei esse assunto de lado para focar em outras coisas. No entanto o Wenderson conseguiu achar uma solução, veja o artigo completo com a solução.
Adobe Flex, BlazeDS, Gilead, LazyLoading Resolvido(LazyLoading Solved)

Usando Acelerômetro no Flash Lite com Nokia Platform Services

Leonardo França — Mon, 30 Aug 2010 15:13:49 +0000

Acelerômetro é um sensor de movimento, sendo um dispositivo responsável por medir as posições relativas nos eixos x, y e z, ou seja, calcular a aceleração do objeto. Hoje em dia é usado para as mais variadas utilidades como por exemplo: air bags, medição de vibrações, medições de inclinação, smartphones, video games etc.

O Acelerômetro é usado hoje em dia é usado para as mais variadas utilidades como por exemplo: air bags, medição de vibrações, medições de inclinação, smartphones, video games etc.

O Flash Player 10.1(só para mobile) e o Flash Lite 4.0 possuem acesso ao acelerômetro do dispositivo. Estou ancioso para colocar as mãos em um Nokia N8 para testar as novas funcionalidades do Flash Lite 4.0, mas esta dificil. Enquanto isso, vamos desenvolvendo com Flash Lite 3.0 e 3.1.
A Nokia criou uma biblioteca especialmente para trabalhar em conjunto com o Flash Lite dando acesso a recurso que nativamente não são possivéis como acesso ao acelerômetro, GPS, agenda de contatos etc.

A Nokia criou uma biblioteca especialmente para trabalhar em conjunto com o Flash Lite dando acesso a recurso que nativamente não são possivéis como acesso ao acelerômetro, GPS, agenda de contatos etc.

Vou mostrar um exemplo simples do uso do acelerômetro com Flash Lite 3.0 e Nokia Platform Services.
Baixe a biblioteca da Nokia e em seguida salve no diretorio de acordo com seu sistema operacional:

O Nokia Platform Services só funciona em dispositivos com o Symbian S60 5th.

No Mac - Copie para /Users//Library/Application/Support/Adobe/Flash CS5/en/Configuration/Classes/
No Windows Vista - Extraia para /Users//AppData/Local/Adobe/Flash CS4/en/Configuration/Classes.
No Windows XP - Extraia para //Local Settings/Application Data/Adobe/Flash CS5/en/Configuration/Classes/

Começaremos nosso primeiro exemplo:

Crie um arquivo do tipo ActionScript 2.0 e peça para compilar para o Flash Lite 3.0 ou 3.1. Ou pode criar diretamente pelo Adobe Device Central CS5.
Crie um simbolo do tipo MovieClip e dê o nome de instância de "ball_mc".
Crie três campos de textos do tipo dinâmicos, neles serão mostradas as posições x, y e z.
Devemos ter o stage parecido com isto:
Stage para testar Acelerômetro

Feito isto, vamos a parte de programação agora:
Começaremos configurando o stage para não modificar o tamanho do aplicativo caso a janela sejá redimensionada. O "DisableKeypadCompatibilityMode" serve para usar em smartphones com telas touchscreen, se não for usado, o smartphone automaticamente adicionar as teclas virtuais referente a um smartphone não-touchscreen.

PLAIN TEXT

ACTIONSCRIPT:

Stage.scaleMode = "noScale";
Stage.align = "LT";
 
fscommand2("DisableKeypadCompatibilityMode");
fscommand2("FullScreen", "true");

Agora vamos importar as classes feitas pela Nokia e utilizar a classe Device e desabilitar a autorotação do aplicativo.

PLAIN TEXT

ACTIONSCRIPT:

import com.nokia.lib.Service;
import com.nokia.lib.Device;
 
var deviceObject:Object = new Device();
deviceObject.DisableAutoRotation(true);

Utilizaremos a classe Service passando o paramentro Sensor e em seguida passando como criterio de busca as coordenadas do acelerômetro.

PLAIN TEXT

ACTIONSCRIPT:

var sensors = new Service("Service.Sensor", "ISensor");
var inParam = {SearchCriterion:"AccelerometerAxis"};
var outParams = sensors.FindSensorChannel(inParam);

Será retornado uma serie de valores que usaremos para "avisar" o smartphone que nosso aplicativo será atualizado a cada mudança de valor das coordenadas do acelerômetro através de um método callback.

PLAIN TEXT

ACTIONSCRIPT:

var channelInfo = outParams.ReturnValue;
var channelId = channelInfo[0].ChannelId;
var contextType = channelInfo[0].ContextType;
var quantity = channelInfo[0].Quantity;
var channelType = channelInfo[0].ChannelType;
var location = channelInfo[0].Location;
var vendorId = channelInfo[0].VendorId;
var dataItemSize = channelInfo[0].DataItemSize;
var channelDataTypeId = channelInfo[0].ChannelDataTypeId;
var channelParams = {ChannelId:channelId, ContextType:contextType, Quantity:quantity, ChannelType:channelType, Location:location, VendorId:vendorId, DataItemSize:dataItemSize, ChannelDataTypeId:channelDataTypeId};
 
var inParams = {ListeningType:"ChannelData", ChannelInfoMap:channelParams};
sensors.RegisterForNotification(inParams, callBack);
function callBack(transactionID:String, eventID:String, outParam:Object) 
{
    if (outParam.ErrorCode == 0) 
    {
        var channelData = outParam.ReturnValue;
        txtX.text = channelData.XAxisData;
        txtY.text = channelData.YAxisData;
        txtZ.text = channelData.ZAxisData;
        
        xSpeed -= channelData.XAxisData/NOISE;
        ySpeed += channelData.YAxisData/NOISE;
    }
}

Depois basta atualizar as coordenadas x e y com os valores xSpeed e ySpeed em nosso MovieClip. Disponibilizei no fonte um código para delimitar até onde o MovieClip pode andar, ou seja, somente na area do nosso aplicativo.
DOWNLOAD SOURCE

Para saber mais:
http://www.forum.nokia.com/Develop/Other_Technologies/Flash_lite/
http://library.forum.nokia.com/index.jsp?topic=/Flash_Lite_Developers_Library/GUID-46EABDC1-37CB-412A-ACAD-1A1A9466BB68.html

Se você esta procurando um livre sobre Flash Lite, recomendo Flash Lite 2: Crie Aplicativos e Games para Celulares do meu amigo Fabricio Manzi, creio que seja o único em português que temos

Detectando movimentos da webcam com Adobe Flash

Leonardo França — Fri, 27 Aug 2010 10:51:24 +0000

Um recurso interessante e que pouca gente conhece no Flash Player ou Adobe AIR, é que além de acessar recursos como a webcam do usuário, ele pode também detectar se há ou não movimentos na camera. Isso pode ser útil se você está implementando um sistema de stream ao vivo e quer economizar a banda usada. Por exemplo, só será publicado o stream se a camera tiver algum movimento.

O Flash Player ou Adobe AIR, além de acessar recursos como a webcam do usuário, pode também detectar se há ou não movimentos na camera.

Vamos ver um exemplo usando o Adobe Flash Professional CS5 e com Flash Builder 4(usando o framework Flex 4).

Adobe Flash Professional CS5

Crie um arquivo do tipo ActionScript 3.0
Aperte F11 para abrir a library, peça para criar um novo simbolo do tipo "video":
Library->New Video
Aparecerá uma nova janela, de o nome de "cam" e deixe a opção "Video (ActionScript-controlled)" selecionada:
cam
Arraste o componente que você acabou de criar para o stage e de o nome de instância de "cam", depois redimesione para 320x240.
Arraste um componente do tipo ProgressBar da library User Interface. Dê o nome de instância "pbar".
Feito isto, você deve ter algo parecido com isto:
Stage pronto para começar a programação

Temos nosso stage pronto para começar a programação ActionScript 3.0. Vamos começar com o Flash Player pedindo para ter acesso a webcam e em seguida colocar a imagem da webcam em nosso componente de video.

PLAIN TEXT

ACTIONSCRIPT3:

myCam = Camera.getCamera();
cam.attachCamera(myCam);

Agora basta fazer com que nosso filme escute o evento "ActivityEvent" da webcam.

PLAIN TEXT

ACTIONSCRIPT3:

myCam.addEventListener(ActivityEvent.ACTIVITY,handlerMotion);

E no método handlerMotion, implementamos as ações na ProgressBar.

PLAIN TEXT

ACTIONSCRIPT3:

function handlerMotion(evt:ActivityEvent):void
{
    trace(evt.target.activityLevel);
    pbar.setProgress(evt.target.activityLevel,100);
    if(evt.target.activityLevel <10)
    {
        trace("muito quieto! =õ(");
    }
    else
    {
        trace("eba! festa!!! \\o/\\O/\\o/");
    }
}

Veja o exemplo em funcionamento:

Adobe Flex 4
Agora veremos um exemplo usando o Adobe Flex, vou capturar a camera usando o componente VideoDisplay.

Crie um projeto do tipo web(Flex) ou desktop(AIR).
Arraste um componente do tipo VideoDisplay e outro do tipo ProgressBar para o palco.
Devemos ter algo parecido com isso:
PLAIN TEXT
MXML:
1. "1.0" encoding="utf-8"?>
2. xmlns:fx="http://ns.adobe.com/mxml/2009"
3. xmlns:s="library://ns.adobe.com/flex/spark"
4. xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="450" minHeight="400" width="450" height="400">
5. id="cam" x="48" y="38" width="360" height="240"/>
6. id="pbar" x="125" y="297"/>
7. >

Basta implementar a programação ActionScript agora, é bem parecido com o modo de como fizemos no Flash. Mudaremos pouca coisa no código ActionScript 3.0.

PLAIN TEXT

ACTIONSCRIPT3:

protected function application1_creationCompleteHandler(event:FlexEvent):void
{
    pbar.mode = "manual";
    myCam = Camera.getCamera();
    var vd:Video = new Video(320,240);
    vd.attachCamera(myCam);
    cam.addChild(vd);
    myCam.addEventListener(ActivityEvent.ACTIVITY, handlerMotion);
}
 
private function handlerMotion(evt:ActivityEvent):void
{
    trace(evt.target.activityLevel);
    pbar.setProgress(evt.target.activityLevel,100);
    if(evt.target.activityLevel <10)
    {
        pbar.label = "muito quieto! =õ(";
    }
    else
    {
        pbar.label = "eba! festa!!! \\o/\\O/\\o/";
    }
}

Agora é so aplicar a lógica para que seja transmitido ou não o stream da webcam do usuário.

DOWNLOAD SOURCE FLASH

DOWNLOAD SOURCE FLEX

Para saber mais:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/media/Camera.html?allClasses=1

Cinemática Inversa no Adobe Flash

Leonardo França — Wed, 25 Aug 2010 11:36:40 +0000

Em Física, Cinemática é o ramo responsável por estudar o movimento dos corpos. Cinemática Inversa (IK) é uma tecnica muito utilizada em engenharia, robotica e animação. Consiste no movimento de um objeto ou de um conjunto de objetos em relação a outros objetos, usando uma estrutura articulada de bones. Os bones permitem a movimentação de forma complexa e natural permitindo criar animação de personagens, como braços, pernas e expressões faciais com muito mais facilidade, a imagem mais simples para ilustra isso é do movimento de uma alavanca. Quem já trabalha com softwares de modelagem 3D como o 3D Studio MAX já conhece essa tecnica. A partir do Adobe Flash CS4, temos a possibilidade de se trabalhar com cinemática inversa na própria IDE do Flash e uma biblioteca em ActionScript 3.0.

Cinemática inversa (IK) é um método de animação que consiste no movimento de um objeto ou de um conjunto de objetos em relação a outros objetos, usando uma estrutura articulada de bones. Os bones permitem a movimentação de forma complexa e natural permitindo criar animação de personagens, como braços, pernas e expressões faciais com muito mais facilidade, a imagem mais simples para ilustra isso é do movimento de uma alavanca.

Agora vamos ver um exemplo utilizando o Adobe Flash Professional CS5, será bem simples para entender o funcionamento dessa ferramenta.

Crie um novo arquivo do tipo ActionScript 3.0
Crie três simbolos graficos em forma retangular para que o efeito seja melhor visualizado. Deixe-os lado a lado formando uma fileira.
Selecione a ferramenta Bone
Clique na estremidade do primeiro simbolo e arraste ate o final dele. Será formado um bone com uma estremidade maior sendo a base.
Faça a mesma coisa com o segundo simbolo de modo que comece arrastando a partir da estremidade menor do bone do primeiro simbolo.
Seu stage deve ser parecido com isto:
IK Adobe Flash
Note que foi criado uma nova camada com o nome de Armature. Selecione por exemplo o frame 20, clique com o botão direito sobre o frame e selecione "Insert Pose". Feito isso, movimente de alguma forma os simbolos no stage. Faça a mesma coisa para o frame 40 e 60.
Agora teste o filme "Ctrl+Enter".

DOWNLOAD SOURCE

Para saber mais:
http://help.adobe.com/pt_BR/flash/cs/using/WS58BD3A02-DA25-488f-B534-AE5463A24833.html

Livros recomendados:
Adobe Flash CS4 Professional Como Fazer 100 Técnicas Essenciais