EDO0417_13

Prévia do material em texto

PROGRAMAÇÃO PARA INTERNET RICA - EDO0417
Semana Aula: 13
Flash AS3 - Parte II
Tema
Flash AS3 - Parte II
Palavras-chave
Objetivos
Aplicar técnicas de programação em Actionscript 3.0.
 
Conhecer álguns pricícipios básicos da plataforma Flex.
 
Aplicar os conhecimentos de AS3 na criação de jogos.
Estrutura de Conteúdo
 
Usando o this no Actions Script 3
A palavra chave this, no AS2 fazia referencia ao objeto onde se encontrava a função, exemplo:
function mostraThis(){
 trace(this._name); // saida: "botao"
}
botao.onPress = mostraThis;
Com isso você poderia manipular mais de um objeto com o mesmo código: 
function mostraThis(){
 this._x = 300;
 this._y = 300;
 trace(this.name); // saída: "botao1" ou "botao2"(o que for 
clicado)
}
botao1.onPress = mostraThis;
botao2.onPress = mostraThis;
Porem, no AS3 as coisas mudaram, o this, quando usado como no exemplo acima, fará referencia a time-
line do objeto onde esta a função, e não mais a ele próprio.
function mostraThis (event:MouseEvent) {
 trace(this) //saida [object MainTimeline]
}
botao1.addEventListener(MouseEvent.CLICK,mostraThis );
botao2.addEventListener(MouseEvent.CLICK,mostraThis );
No caso acima o MainTimeline se refere a time-line principal(onde estava a função),
para utilizar o this como era usado no AS2, você deve usar a propriedade .currentTarget do objeto 
passado como paramento na função
function mostraThis (event:MouseEvent) {
 event.currentTarget.x = 100
 event.currentTarget.y = 100
 trace(event.currentTarget.name) //saida: "botao1" ou "botao2"(o 
que for clicado)
}
botao1.addEventListener(MouseEvent.CLICK, mostraThis )
botao2.addEventListener(MouseEvent.CLICK, mostraThis )
O currentTarget será sempre o objeto do qual o listener foi adicionado, isso vale para qualquer evento 
adicionado a um objeto como onEnterFrame, mouseOver, etc. Existe outra propriedade chamada target, 
cuidado ao usa-la pois ela nem sempre se refere ao objeto que contem o evento.
 
 
getURL -> navigateToURL
Uma outra ação muito utilizada, é o getURL para abrir uma pagina html, ou executar 
um comando em javascript, no AS3 ele foi trocado pelo comando navigateToURL.
veja como fazer:
function onclick(event:MouseEvent):void {
 // cria a string com o endereço(URL)
 var url:String = "http://www.imasters.com.br";
 //cria o objeto com o endereço(URL) a ser carregado
 var pagina:URLRequest = new URLRequest(url);
 //abre a pagina na mesma janela do navegador
 navigateToURL(pagina, "_self");
}
botao_btn.addEventListener("click", onclick);
Repare que o frame em que a pagina abrirá deve ser colocado no comando navigateToURL.
Também pode ser feito em uma única linha:
function onclick(event:MouseEvent):void {
 navigateToURL(new URLRequest("http://www.imasters.com.br"), 
"_self");
}
botao_btn.addEventListener("click", onclick);
se fosse um comando javascript
function onclickevent:MouseEvent):void {
 // cria a string com o javascript
 var js:String = "java script:alert('ola!');";
 
 //cria o objeto com o comando
 var pagina:URLRequest = new URLRequest(js);
 
 //abre a pagina na mesma janela do navegador
 navigateToURL(pagina, "_self");
}
botao_btn.addEventListener("click", onclick);
 
Carregamento de imagens ou swf externos
Agora não tem mais o loadMovie(), para carregar swfs/imagens use a classe Loader
//cria o objeto que carregará
var carregador:Loader = new Loader();
//inicia o carregamento
carregador.load(new URLRequest("preview.swf"));
//adiciona o swf ao palco
addChild(carregador);
//posiciona no lugar correto
carregador.x = 10;
carregador.y = 10;
Para carregar dentro de um movieClip especifico que esteja no palco use a função addChild();
//adiciona o swf carregado no movieClip chamado "holder_mc" que já 
está no palco
holder_mc.addChild(carregador);
 
 
Carregando variáveis de um arquivo txt
A classe LoadVars deu lugar para a URLLoader que também é usada para carregar 
arquivos XML, mas não para manipulação deles, para isso ainda existe a classe XML
Um exemplo de carregamento de txt:
Crie um arquivo texto com o seguinte conteúdo
nome=Samuel&idade=31
e salve como "arquivo.txt", na mesma pasta onde esta o seu .FLA
o código para carregar é esse
//cria o objeto com o endereço(URL) a ser carregado
var endereco:URLRequest = new URLRequest("arquivo.txt")
//cria o objeto que carregará
var loader:URLLoader = new URLLoader();
//Específica o tipo de dado a ser carregado
loader.dataFormat = URLLoaderDataFormat.VARIABLES;
//Função a ser executada quando o carregamento acabar
function loadCompleto(event:Event):void {
 trace(loader.data.nome);
 trace(loader.data.idade);
}
//adiciona a função ao Listener
loader.addEventListener(Event.COMPLETE, loadCompleto);
//carrega o arquivo txt
loader.load(endereco);
 
 
Carregando um arquivo XML
Para carregamento de XML, é preciso usar 2 classes, a URLLoader para carregar o arquivo e 
a XML para manipula-lo, na XML aconteceram algumas modificações, no modo de acessar os nós, agora é 
preciso utilizar o nome de cada nó, e não mais childNodes, a propriedade ignoreWhite(que agora é 
ignoreWhitespace), já vem por default habilitada (e já não era hora)
//cria o objeto com o endereço(URL) a ser carregado
var endereco:URLRequest = new URLRequest("agenda.xml")
//cria o objeto que carregará
var loader:URLLoader = new URLLoader();
function onComplete(event:Event) {
 var agenda = new XML(event.target.data);
 var total = agenda.pessoa.length();
 for (var i = 0; i < total; i++) {
 //os atributos dos nós são acessado com um "@" antes no nome
 trace('cod: ' + agenda.pessoa[i].@cod);
 //os valores do nós são acessado pelo próprio nome
 trace('nome: ' + agenda.pessoa.nome[i]);
 trace('fone: ' + agenda.pessoa.telefone[i]);
 trace('---------------------');
 }
}
//adiciona a função ao Listener
loader.addEventListener(Event.COMPLETE, onComplete);
//carrega o arquivo xml
loader.load(endereco);
 
 
 
 
FLEX 3
 
 Antes de entrarmos na parte teórica sobre flex 3, você precisa entender um pouco mais sobre aplicações 
ricas para a internet (da sigla em inglês RIA Rich Internet Application). RIA é um conceito que existe há 
algum tempo e consiste em levar até os usuários da internet a mesma experiência que eles têm com 
aplicações que rodam em seus desktops.
 
 A ideia básica de uma aplicação RIA é criar aplicações que rodam sobre um sandbox do lado do cliente, 
deixando assim todo o processamento da interface e ações para o browser do usuário. Desta forma os 
usuários interagem por uma aplicaçãop cliente-side e esta aplicação envia o processamento via HTTP ou 
outro protocolo para aplicação server-side.
 
 Assim o processamento mais pesado como, por exemplo, acesso a banco de dados fica a cargo da 
aplicação server-side e pode ser feito por diversas linguagens, como Ruby on Rails, Python, Zope, Plone, 
Java ou até mesmo PHP.
 
 Ajax usa todo o poder do javascript interpretado pelo browser, recebendo as ações do usuário e enviando 
de forma assíncrona para a aplicação server-side via HTTP.
 Já tecnologias como Open Laszlo e Adobe Flex usam tecnologias Flash, cujo código-fonte é compilado 
antes de colocar a aplicação em produção. Este código-fonte gera um arquivo swf, que nada mais é do um 
bytecode que roda sobre a runtime do Flash Player.
 
 O flex é uma das tecnologias que estão fazendo barulho no mercado de desenvolvimento de aplicações 
ricas para a web, tendo um maior destaque e um grande número de empresas e programadores que o estão 
adotando no Brasil. Faça uma busca por comunidades de Flex e você irá entender o que eu estou querendo 
dizer.
 Com o Flex podemos criar aplicações ricas de interatividade, levando até os usuários o máximo de 
experiências em usabilidade, aliado à simplicidade de aplicações desktops. Possui um modelo deprogramação bastante conhecido pelos programadores, o XML, o que faz com que o Flex tenha notações 
simples para criar os componentes e toda a arquitetura visual de sua aplicação. Este plugin já faz parte de 
99% de todos os computadores ligados à web, desta forma a mesma aplicação que você desenvolve em 
Flex vai rodar sob qualquer sistema operacional e sob qualquer browser, para isso basta ter o Flash 
Player instalado.
 
 Existem duas formas de desnvolver aplicações Flex. Uma delas é o uso do SDK, que permite compilar, 
debugar e gerar aplicações usando seu terminal ou o prompt de comando. A outra forma de desenvolver 
com o Flex é através do Flex Builder. O Builder é um plugin para eclipse que permite usar o Flex SDK de 
forma visual ou com um editor de códigos com debug automatizado, cor na sintaxe e edição visual dos 
componentes, do tipo arrastar e soltar.
 
 http://www.flexregistration.com/
 
 Noe exemplos criados aqui vamos usar a versão Trial do Flex Builder, que poderá ser usada durante 60 
dias. A única restrição é que nos gráficos e nos componentes profissionais irá aparecer uma pequena 
marca dizendo que é uma versão Trial. Mas para o nosso propósito e integração com o FMS, teremos todo 
o poder deste ambiente de desenvolvimento integrado.
 
 Para fazer o download basta acessar:
http://www.adobe.com/cfunsion/entitlement/index.cfm?e=flex3email
 
Estratégias de Aprendizagem
Indicação de Leitura Específica
Aplicação: articulação teoria e prática
Atividade:
 
Criação de um jogo simples com AS3
 
Título: AJAX, RICH INTERNET APLICATIONS E DESENVOLVIMENTO: WEB 
PARA PROGRAMADORES
Autor: HARVEY M. DEITEL, PAUL J. DEITEL
Editora: Prentice Hall Brasil, 2009
ISBN: 8576051613, 9788576051619
 
Capitulo 15 - Adobe Flash CS3: Montagem de um jogo Interativo
paginas: 374 até 392 
Considerações Adicionais