MXStudio » Natan D. Alves

Novidades do Flash CS5 – Parte 3

Natan D. Alves — Fri, 04 Jun 2010 15:23:39 +0000

Olá comunidade.

Nesta última parte dessa série sobre as novidades do Flash CS5 vou mostrar para vocês as novidades do painel de Ações, o novo painel Code Snippets, novas opções no painel de Erros e sobre a integração com o Flash Builder.

Novidades do painel de Ações

Se tinha alguma coisa no Flash que precisava urgentemente de mudanças esse com certeza era o painel de Ações. Depois de algumas novas funcionalidades vindas no Flash CS3, o painel de ações foi deixado de lado na versão CS4 mas na versão CS5 trouxe melhorias a muito tempo pedido pelos desenvolvedores.

A principal melhoria, é que agora é possível usar Code Hints para Classes customizadas e importadas. O recurso Code Hints para quem não conhece exibe no painel de ações os métodos e propriedades que um determinado objeto possa ter, além dos parametros da funções, e esse recurso só funcionava para Classes e funções que vem com o Flash.

Além do Code Hints, agora o painel de Ações automaticamente fecha blocos de ações que usam chaves. Ao criar um bloco de comandos e usar o abre chave ({) e for para a próxima linha, o Flash automaticamente insere um fecha chave (}) evitando assim algum erro sintaxe.

Outra novidade do painel de Ações é que ele automaticamente importa as Classes que estiver usando. Por exemplo, se você estiver criando uma Classe e nessa Classe você for usar um MovieClip, você é obrigado a importar a Classe MovieClip para que sua Classe funcione corretamente, então você tem que saber que a Classe MovieClip se encontra dentro do pacote flash.display.MovieClip. Com o recurso de automaticamente importar a Classe, você não precisa mais ter que decorar em quais pacotes cada Classe fica.

Novo painel Code Snippets

Uma novidade bem bacana é o painel Code Snippets. Nesse painel você encontra diversos códigos prontos para serem usados (algumas ações precisa que um objeto no qual deseja atribuir a ação esteja selecionado), eliminando a necessidade de ficar escrevendo sempre os mesmos códigos. Para usar esse painel, vocês escolhem quais das ações que deseja usar e só precisam clicar duas vezes sobre ela que o painel de Ações será aberto com as ações para aquela opção.

Outra forma de uso do painel, é selecionar qual ação que deseja, clicar com o botão direito do mouse e selecionar a opção Copy to clipboard. O Flash irá exibir uma mensagem dizendo que a ação foi copiada para seu clipboard e vai pedir para você abrir o painel de ações e colar as ações nele.

No próprio painel existem dois botões com as mesmas funcionalidades citadas acima, o primeiro botão com o símbolo de um frame com ações (com o @) ao ser clicado copia as ações para o frame atual e o segundo botão com dois quadrados copia as ações para seu clipboard.

A parte mais legal desse painel é a possibilidade de adicionar novos códigos a ele e compartilhar com outros usuários seus códigos. Para adicionar novos códigos ao painel, basta abrir o painel e clicar no botão Options (um botão em forma de uma engrenagem) e selecionar a opção “Create New Code Snippet”.

Uma nova janela se abrirá, nela podemos inserir um nome para a Ação que estamos criando, uma descrição que será mostrada quando o mouse estiver sobre a ação no painel, se tiver alguma ação no painel de Ações selecionada e clicar no botão Auto Fill o Flash preenche o campo Code com ela, o campo code preenchemos com as ações que queremos adicionar ao painel e por último podemos selecionar a última opção caso desejamos que o Flash automaticamente coloque no lugar de instance_name_here a instancia do objeto selecionado (forçando o usuário a selecionar um objeto para aplicar determinada ação).

Ao terminar de criar um novo Snippet, ele será criado dentro de uma pasta chamada Custom. Se quiser mover esse código para uma outra pasta será preciso editar o XML que armazena todos os códigos do painel. Para edita-lo basta clicar no botão Options, Edit Code Snippets XML. Vale lembrar que para editar esse XML é preciso conhecer XML para evitar erros na hora de salvar.

Para compartilhar suas ações com outros usuários basta clicar no botão Options e selecionar a opção Export Code Snippets XML. Todas as ações que estão em seu painel serão salvos em um arquivo XML e é esse arquivo XML que você irá disponibilizar para outros usuários importarem para o Flash. Caso queiram remover todas as outras ações e deixar apenas as suas ações mais uma vez terão que editar o XML. Para importar o XML com Ações de outros usuários o processo é praticamente o mesmo de exportar, basta clicar no botão Options e selecionar a opção Import Code Snippets XML.

Um dos problemas que a Adobe precisa melhorar nesse painel é o compartilhamento dessas ações. Quando você decide exportar essas ações você não pode escolher quais das Ações do painel deseja exportar e o mesmo vale quando se importa um XML, se você importar um XML que tem as mesmas ações que o seu painel, o Flash não ignora essas ações e importa elas deixando itens duplicados. Fora que ficar editar XML não é algo legal né.

É possível também remover determinadas ações do painel, basta selecionar a ação desejada e clicar com o botão direito do mouse sobre ela e selecionar a opção Delete Code Snippet. Outra opção é selecionar a ação que deseja remover e clicar em Options, Delete Code Snippet. E por último, é possível retornar o painel com as ações originais, para fazer isso basta selecionar a opção Options, Reset to Default XML.

Novas opções do painel de Erros (Compiler Errors)

O painel de erros recebeu novas opções, agora é possível esconder ou mostrar os erros ou avisos (warnings) que seu arquivo teve ao ser compilado. Uma facilidade a mais para nós desenvolvedores.

Outra opção inserida foi a possibilidade de navegar entre as mensagens através de botões (setas).

Integração com o Flash Builder 4

Anteriormente, se você queria usar o Flex (agora Flash Builder) para criar uma Classe (já que o painel de ações do Flash era muito inferior comparado ao Flex), o processo era muito chato. Você tinha que criar um projeto novo, criar sua Classe, depois copiar do Flex o ActionScript e colar no Flash, testar, se fosse modificar alguma coisa tinha que repetir o processo e assim vai. Agora esse processo está muito mais fácil, ao criar uma nova Classe, o Flash oferece a possibilidade de escolher em qual dos dois softwares usar, o Flash ou Flash Builder.

Se decidir usar o Flash Builder, ele será aberto (caso ele não esteja aberto) e perguntará aonde está seu arquivo fla salvo e perguntará aonde deseja salvar o projeto.

No Flash Builder aparecem três novas opções, a primeira chamada Publish in Flash Professional é o mesmo que no Flash ir em File, Publish, ou seja serão gerados seus arquivos selecionados no painel Publish Settings. A segunda opção chamada Test Movie in Flash Professional é o famoso Ctrl+Enter (ou Cmd+Return se estiver no Mac), o Flash Builder irá chamar o Flash para compilar seu arquivo e você poderá testa-lo. Ao fechar do arquivo compilado volta-se ao Flash Builder. E a última opção chama-se Debug in Flash Profissional, onde o Flash Builder novamente leva vocês de volta ao Flash no modo de Debug para debugar seu arquivo para achar algum erro ou verificar seu comportamento.

Conclusões

Não tem como não ficar contente com as novidades que a versão CS5 do Flash recebeu, principalmente o painel de Ações que a muitos anos estava devendo comparado a outros IDE de desenvolvimento em Flash. A integração com o Flash Builder também foi bem vinda, além das novidades na parte de texto e o novo painel Code Snippets que na minha opinião ainda pode ser melhorado para melhor utilização.

Gostaria de aproveitar a oportunidade e convidar todos os leitores a visitarem meu Portfolio Online, lá você poderão encontrar todos os meus trabalhos e tutoriais desenvolvidos: http://www.natanalves.com

Um abraço a todos e até a próxima.

Autor: Natan D. Alves – Moderador do Fórum de Flash & ActionSctipt MXSTUDIO

Qualquer dúvida envie um e-mail para natanalves@mxstudio.com.br ou acesse nosso fórum

Novidades do Flash CS5 – Parte 2

Natan D. Alves — Sun, 23 May 2010 21:50:23 +0000

Olá comunidade.

Nessa segunda parte de uma série de três artigos falo sobre o novo painel SWF History, novas opções com a ferramenta de texto e sobre o Componente FLVPlayback.

Quem não acessou a primeira parte da série pode acessar através do link abaixo.

Novidades do Flash CS5 – Parte 1

Painel SWF History

No painel de propriedades (Properties) agora existe uma nova opção chamada SWF History. Esse painel armazena informações como tamanho, data e hora que o swf foi gerado ao usar Ctrl+Enter (Cmd+Enter no Mac) ou no menu Control – Test Movie. Sempre que você testa seu arquivo o painel atualiza as informações.

O bacana desse painel é que nós temos um feedback de quando houve novas versões do arquivo. Outra opção legal dele é que ele avisa quando o tamanho do SWF gerado tenha aumentado de forma significante, como se estivesse nos avisando que algo de errado poderia ter acontecido para que o arquivo tenha ficado muito maior comparado a versão anterior.

O painel exibe apenas as três últimas informações do swf gerado, mas vocês podem recuperar todas as outras informações clicando no botão Log, que irá exibir no painel Output todas as outras informações.

Existe ainda a possibilidade de apagar o histórico clicando no botão Clear. Esse painel funciona apenas para arquivos salvos para o Flash CS5, se estiver com um arquivo que foi salvo nas versões anteriores o painel ira mostrar as informações, mas ao salvar para outra versão do Flash e abrir o arquivo novamente não existirá as informações anteriores.

Novas opções da Ferramenta Texto

A ferramenta texto foi a que mais obteve novas funcionalidades no Flash CS5. Anteriormente, tínhamos três opções na hora de criar um campo de texto, Texto estático, Texto dinamico e Texto input. Agora no CS5, essas três opções ficam disponíveis apenas quando selecionamos a opção Classic Text, mas a maior novidade é o formato TLF Text (ou Text Layout Format). Com essa opção selecionada ainda podemos criar campos de texto da forma anterior (texto estático, dinamico e input), só que com ele temos uma infinidade de opções a mais de personalização.

Vamos começar pela novidade mais legal, a possibilidade de criar campos de textos ligados, quem utiliza o InDesign conhece essa funcionalidade já faz um tempo. O que essa ferramenta faz basicamente é dizer ao Flash que existem dois ou mais campos de texto em posições diferentes, fontes, cores e tamanhos diferentes, e se um desses campos não tiver espaço para exibir o texto desejado o texto seguirá para o próximo campo ligado.

Mas como fazer isso? Selecionem a ferramenta de Texto, no painel Properties (propriedades) selecionem a opção TFL Text e no palco criem um campo do tamanho que desejarem e com um texto maior que o tamanho do campo. Vocês vão reparar que no lado superior esquerdo e no lado inferior direito vão aparecer duas caixas (se o texto for maior que o tamanho do campo de texto a caixa do lado direito inferior aparece com cor vermelha), ao clicar em uma dessas caixas o cursor do mouse muda indicando que se clicar no palco um novo campo de texto irá ser criado e ele estará ligado a um outro campo, se você já tiver um campo no palco e clicar sobre ele os dois campos ficam ligados.

Infelizmente a criação de campos ligados só fica disponível para arquivos que usam ActionScript 3 e FlashPlayer 10, mais um bom motivo para que os usuários passem a adotar o ActionScript 3 como linguagem de programação padrão no Flash pois as demais versões não terão atualizações.

Continuando com as novidades da Ferramenta de Texto, vou mostrar agora como criar campos de texto com colunas. Mais uma vez com a ferramenta de texto selecionada e a opção TLF Text selecionada, criem um campo de texto no palco do tamanho que desejam e insiram um texto qualquer. No painel Properties (ou propriedades) na aba Container and Flow existe uma opção chamada Columns (colunas) onde a primeira opção é a quantidade de colunas que o campo de texto terá e a segunda opção é o espaçamento dessas colunas.

Novidades do Componente FLVPlayBack

No Flash CS5 existem duas versões do Componente FLVPlayback, uma chamada apenas de FLVPlayback e a outra chamada FLVPlayback 2.5. A diferença entre as duas versões basicamente é que na versão 2.5 melhora a performance e a correção de vídeos em streaming, além da possibilidade do uso de DVR (que significa Digital Video Recorder) que possibilita novas opções no streaming de vídeo no Flash. Outra novidade são os novos Skins do Componente, que agora exibem a duração e o tempo do vídeo.

Mas a novidade mais legal é a possibilidade de assistir o vídeo no palco do Flash sem a necessidade de exportar seu arquivo para teste. Com o Componente no Palco e com o vídeo desejado selecionado, o Componente se comporta no palco da mesma maneira que se comporta quando se testa seu arquivo.

Conclusões

Sem dúvida as novidades mais legais até agora do Flash CS5 vem da ferramenta de Texto, mas ainda existe a terceira e última parte dessa série de artigos sobre as novidades do Flash CS5, e na última parte mostrarei as novidades no painel de ações, um novo painel chamado Code Snippets, novidades no painel de Erro e sobre a integração do Flash CS5 com o Flash Builder 4.

Um abraço a todos e até a próxima.

Autor: Natan D. Alves – Moderador do Fórum de Flash & ActionSctipt MXSTUDIO

Qualquer dúvida envie um e-mail para natanalves@mxstudio.com.br ou acesse nosso fórum

Novidades do Flash CS5 – Parte 1

Natan D. Alves — Mon, 03 May 2010 00:22:59 +0000

Olá comunidade.

Nessa primeira parte da série de artigos sobre o Flash CS5, estarei mostrando para vocês as novidades visuais, criação de aplicativos para iPhone, novos elementos gráficos da ferramenta Deco Tool, novas opções para a ferramenta Bone e integração com serviços online chamado Adobe CS Live.

Novo visual

Pela terceira vez, a Adobe decide mudar a identidade visual dos aplicativos do pacote Creative Suite. A primeira mudança que percebemos já começa no ícone dos aplicativos, alteração que não me agradou muito.

Além dos ícones, a tela inicial também passou por alterações e ficaram bem mais legais comparado as mudanças nos ícones.

E ae tela de boas vindas também passou por algumas alterações.

Criando aplicativos para iPhone

Mesmo com a proibição da Apple com relação a criação de aplicativos para iPhone, iPad e iPod que não usem a IDE da Apple a Adobe não removeu a função de criação de aplicativos para iPhone. Quando você instala o Flash CS5 aparece uma opção para instalar ou não essa opção, então quem não quiser instalar não é obrigado.

A criação de aplicativos é praticamente o mesmo processo de criação de aplicativos em Adobe AIR, você tem um painel com diversas opções de personalização.

Novos elementos gráficos para a ferramenta Deco Tool

A ferramenta Deco tool para quem não conhece, é uma ferramenta que permite criar elementos gráficos de forma facilitada e com diversas opções de personalização. Eu particularmente nunca cheguei a usar essa ferramenta, mas com tantas opções algum dia ela poderá ser útil.

Novas opções para Bone Tool

A ferramenta Bone Tool permite criar estruturas semelhante a um esqueleto. E agora no Flash CS5 podemos criar animações mais realistas com as novas opções disponíveis para a ferramenta.

Adobe CS Live

Outra novidade bem legal da suite CS5 é a integração com o serviço CS Live. São 5 tipos de servidores online que prometem aumentar a produtividade, diminuir o desperdício de tempo e maior colaboração entre os envolvidos nos projetos. Os serviços oferecidos são:

Adobe BrowserLab – Permite testar sites em diferentes browser e sistemas operacionais, criar comparações e diagnósticos.
Adobe CS Review – Permite criar avaliações de projetos, obtenção de comentários, etc.
Acrobat.com – Permite criar Web conferências, troca de arquivos e colaboração na criação de arquivos.
Adobe Story (beta) – Permite a criação de roteiros para vídeos.
SiteCatalyst® NetAverages™ – Permite verificar as partes mais acessadas de seu site, quais navegadores usados, sistemas operacionais, etc.

O acesso a esses serviços está em um menu no canto superior direito dos programas, você precisa ter uma Adobe ID para fazer login e poder ter acesso a todos a esses serviços.

Mais informações sobre o Adobe CS Live pode ser encontrado através desse link.

Conclusões

Esse foi apenas um aperitivo com as novidades do Flash CS5. No próximo artigo mostrarei novidades na criação de campos de texto, novas opções para vídeo, e novidades no painel Properties. Lembrando que todos os aplicativos da suite CS5 estão disponíveis para teste no site da Adobe para Windows e Mac, vocês podem usar os programas por 30 dias de forma gratuita.

Um abraço a todos e até a próxima.

Autor: Natan D. Alves – Moderador do Fórum de Flash & ActionSctipt MXSTUDIO

Qualquer dúvida envie um e-mail para natanalves@mxstudio.com.br ou acesse nosso fórum

Galeria de Imagens com XML e LightBox

Natan D. Alves — Mon, 09 Nov 2009 00:19:12 +0000

Olá comunidade.

Neste tutorial, irei mostrar a vocês como criar uma Galeria de Imagens com XML no Flash utilizando o efeito LightBox presente em algumas páginas HTML. Os requisitos para esse tutorial são:

Flash 8, Flash CS3 ou Flash CS4
Conhecimento com interação do Flash com XML
Componente FlashLightBox

Criando o XML

Vamos começar criando o XML. O arquivo XML irá conter o nome das imagens e a legenda que será exibida. Tanto o arquivo XML quanto as imagens precisam estar no mesmo diretório do arquivo FLA do Flash. Salvem o XML com o nome de imagens.xml.



   
      imagem.jpg
      Moto Ayrton Senna
   
   
      imagem1.jpg
      Mclaren do Senna
   
   
      imagem2.jpg
      Capacete Senna
   
   
      imagem3.jpg
      Ferrari Shumacher
   
   
      imagem4.jpg
      Loro
   
   
      imagem5.jpg
      Trator do Sítio
   
   
      imagem6.jpg
      Carroça antiga

Download do Componente FlashLightBox

Para criar o efeito LightBox vamos usar o Componente que eu desenvolvi. O link para baixar o Componente e instruções de como instalar estão em meu Blog.

Componente FlashLightBox

Criando a galeria

Após terem baixado e instalado o Componente, vamos criar um novo arquivo no Flash. Abram o painel de Componentes (Ctrl+F7 ou Window, Components) e joguem para o palco o Componente FlashLightBox, abram o painel Properties e dêem instancia de flb para ele. O Componente pode estar posicionado no local que desejar, ele não irá aparecer quando seu arquivo rodar.

Diferentemente das outras galerias que mostrei como criar aqui no MXStudio, nessa galeria não é preciso criar nenhum MovieClip, campo de texto, nem nada. Tudo será criado a partir do ActionScript. Nós vamos carregar as imagens, adicionar uma borda a cada imagem e adicionar uma sombra usando o Filtro DropShadow, cada imagem será dimensionada para um tamanho randomico, assim como sua posição e rotação. Podemos mover as imagens pela tela e para ver a imagem com o tamanho original clicamos duas vezes sobre a imagem para que ela seja revelada com o efeito LightBox.

Vamos as ações da Galeria, quem estiver usando o ActionScript 2, copiem e colem essas ações no mesmo frame que o Componente está:

/* Importa a Classe do Filtro DropShadow */
import flash.filters.DropShadowFilter;
/* Alinha o arquivo para o canto superior esquerdo */
Stage.align = "TL";
/* Desabilitamos o dimencionamento do arquivo */
Stage.scaleMode = "noScale";
/* Variável que vai ser usada no setInterval */
var intervalo:Number = new Number();
/* Variável usada no duplo clique do mouse */
var count:Number = 0;
/* Variável que armazena o total de itens do XML */
var total:Number = new Number();
/* Criamos um listener */
var listener:Object = new Object();
/* Criamos uma instancia da Classe XML */
var xml:XML = new XML();
/* Ignoramos os espaços em branco */
xml.ignoreWhite = true;
/* Carregamos o arquivo XML */
xml.load("imagens.xml");
/* Ao carregar o arquivo XML */
xml.onLoad = function(ok) {
	/* Se não deu erro */
	if (ok) {
		/* Identificamos o primeiro nó do XML */
		xmlNode = this.firstChild;
		/* Armazena o total de itens do XML */
		total = xmlNode.childNodes.length;
		/* Chama a função carrega */
		carrega();
	} else {
		/* Mostra a mensagem de erro */
		trace("Erro");
	}
}
/* Função que carrega as imagens */
function carrega() {
	/* Criamos um laço para percorrer todos os itens do XML */
	for (var i=0; i
Quem estiver usando ActionScript 3 as ações são essas:
/* Alinha o arquivo para o canto superior esquerdo */
stage.align = StageAlign.TOP_LEFT;
/* Desabilitamos o dimencionamento do arquivo */
stage.scaleMode = StageScaleMode.NO_SCALE;
/* Variavel que armazena o MovieClip selecionado */
var alvo:MovieClip;
/* Variável que armazena a quantidade de itens do XML */
var total:Number = new Number();
/* Criamos uma instancia da Classe XML */
var xml:XML = new XML();
/* Criamos uma instancia da Classe URLLoader */
var arquivo:URLLoader = new URLLoader();
/* Carregamos o XML */
arquivo.load(new URLRequest("imagens.xml"));
/* Adicionamos um event listener chamando a função arquivoOk */
arquivo.addEventListener(Event.COMPLETE, arquivoOk);
/* Função chamada assim que o XML é carregado */
function arquivoOk(event:Event):void {
	/* Armazenamos os dados do XML na instancia da Classe XML */
	xml = new XML(event.target.data);
	/* Armazenamos o total de itens */
	total = xml.foto.length();
	/* Chama a função carrega */
	carrega();
}
/* Função que carrega as imagens */
function carrega() {
	/* Criamos um laço para percorrer todos os itens do XML */
	for (var i=0; i
Aqui está um exemplo da galeria funcionando:

Exemplo galeria
Conclusões
Chegamos ao fim de mais um tutorial. Um exemplo bem simples de como usar o Componente FlashLightBox e uma oportunidade para aprender a criar uma galeria usando apenas ActionScript.
Gostaria de aproveitar a oportunidade e convidar todos os leitores a visitarem meu Portfolio Online, lá você poderão encontrar todos os meus trabalhos e tutoriais desenvolvidos: http://www.natanalves.com
Um abraço a todos e até a próxima.
Autor: Natan D. Alves – Moderador do Fórum de Flash & ActionSctipt MXSTUDIO

Qualquer dúvida envie um e-mail para natanalves@mxstudio.com.br ou acesse nosso fórum

Google Maps no Flash

Natan D. Alves — Sun, 14 Jun 2009 22:40:03 +0000

Olá comundidade.

Nesse artigo, irei mostrar para vocês, como usar a API do Google Maps no Flash. Os requisitos para esse tutorial são:

Flash CS3 ou Flash CS4 usando ActionScript 3
Conhecimentos em ActionScript 3

Baixando a API

Antes de ir para o Flash, precisamos primeiro baixar a API que será usada. Tudo o que precisam fazer é acessar o site da API do Google Maps para o Flash no site do Google Code.

http://code.google.com/intl/pt-BR/apis/maps/documentation/flash/

Na página, vocês encontrarão a API através do seguinte link:

http://maps.googleapis.com/maps/flash/release/sdk.zip

No arquivo ZIP da API, contém duas pastar, uma chamada docs, que contém toda a documentação sobre a API, e uma pasta chamada lib, contendo dois arquivos SWC, um para os usuários do Flex (map_flex_1_9a.swc) e outro para os usuários do Flash (map_1_9a.swc).

Como vamos usar a API no Flash, precisamos copiar o arquivo map_1_9a.swc e jogar na pasta aonde estão os Componentes do Flash. O caminho para os usuários do Flash CS3 é:

(Windows) C:/Arquivos de Programas/Adobe/Adobe Flash CS3/linguagem/Configuration/Components
(Mac OS X) Macintosh HD/Applications/Adobe Flash CS3/Configuration/Components

Onde linguagem é o nome da pasta da linguagem na qual o Flash foi instalado. Para os usuários do Flash CS4 o caminho é um pouco diferente:

(Windows) C:/Arquivos de Programas/Adobe/Adobe Flash CS4/Common/Configuration/Components
(Mac OS X) Macintosh HD/Applications/Adobe Flash CS4/Common/Configuration/Components

Antes de colar o arquivo, criem uma pasta com o nome de Google Maps no diretório Components, para manter seu painel de Componentes organizado.

A última coisa que precisaremos fazer antes de ir ao Flash, é gerar uma chave para usar a API. A chave é gerada para os usuários que possuem alguma conta no Google. Para gerar a chave, acessem a página:

http://code.google.com/intl/pt-BR/apis/maps/signup.html

Na página, vocês precisam Ler e concordar com os termos e condições do Google, e digitar o endereço do site no qual irá usar o Google Maps. Após ter digitado o seu site, uma chave será criada. Essa chave será usada no ActionScript.

Indo pro Flash

Chegou a hora de ir para o Flash. Criem um arquivo em ActionScript 3, abram o painel Components e joguem o Componente Google Maps Library para o palco. Se quiserem, podem remover o componente do palco pois não há necessidade de mante-lo já que criaremos o mapa através do ActionScript 3.

Para esse tutorial, criaremos um exemplo básico do Google Maps, exibindo os controles de Zoom e tipos de mapa e iniciando o mapa através de uma localização usando Latitude e Longitude. Copiem e colem as seguintes ações no frame no qual desejam que o mapa apareça.

/* Importa as Classes necessárias */
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.LatLng;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.ZoomControl;
import com.google.maps.overlays.Marker;
/* Criamos uma instancia da Classe Map */
var map:Map = new Map();
/* Inserimos nossa chave */
map.key = "SUA CHAVE AQUI";
/* Definimos um tamanho para o Mapa */
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
/* Adiciona o controle de zoom */
map.addControl(new ZoomControl());
/* Adiciona o controle de tipo de mapa */
map.addControl(new MapTypeControl());
/* Adiciona o Mapa ao palco */
this.addChild(map);
/* Adicionamos um eventListener chamando o evento MAP_READY */
/* Esse evento será disparado quando o Mapa estiver pronto para ser exibido */
/* O evento chama a função mapOk */
map.addEventListener(MapEvent.MAP_READY, mapOk);
/* Função chamada pelo evento MAP_READY */
function mapOk(event:MapEvent):void {
	/* Criamos uma instancia da Classe Marker */
	/* Passamos o local no qual queremos que o mapa esteja marcado */
	/* O local é passado usando Latitude e Longitude */
	var marca:Marker = new Marker(new LatLng(-23.5635963, -46.6538854));
	/* Adiciona a marca ao Mapa */
	map.addOverlay(marca);
	/* Centraliza o Mapa de acordo com a posição desejada */
	map.setCenter(new LatLng(-23.5635963, -46.6538854), 16, MapType.NORMAL_MAP_TYPE);
}

Vídeo tutorial

Não se esqueçam de inserir a chave que foi criada na linha número 12 do ActionScript, a chave precisa estar entre aspas para que não aconteça nenhum erro.

Pra quem quiser, pode ver o vídeo desse tutorial. É a primeira vez que faço um vídeo tutorial, e espero poder fazer sempre em todos os meus futuros tutoriais.

Considerações Finais

Com apenas algumas linhas do ActionScript, conseguimos criar usar o mapa de maneira fácil e sem complicação. Existem outros exemplos de como usar a API na própria página do Google Maps para o Flash.

http://code.google.com/intl/pt-BR/apis/maps/documentation/flash/examples/index.html

Um abraço a todos e até a próxima.

Autor: Natan D. Alves – Moderador do Fórum de Flash & ActionSctipt MXSTUDIO

Qualquer dúvida envie um e-mail para natanalves@mxstudio.com.br ou acesse nosso fórum

Galeria de Imagens 2 ActionScript 3

Natan D. Alves — Tue, 20 Jan 2009 01:39:33 +0000

Olá Comunidade do MXStudio, nesse meu primeiro tutorial de 2009 irei mostrar a vocês como criar uma Galeria de Imagens com miniaturas usando XML e ActionScript 3.

Um tempo atrás fiz a mesma galeria só que usava ActionScript 2, e já recebi diversos E-mails pedindo um tutorial do mesmo tipo usando o ActionScript 3. Quem estiver interesse em fazer o tutorial usando ActionScript 2, segue o link do tutorial.

http://www.mxstudio.com.br/flash/galeria_de_imagens_com_xml_2/

Os pré-requisitos para esse tutorial são:

Flash CS3 ou Flash CS4 usando ActionScript 3
Conhecimento com interação do Flash com XML

Criando o XML

Vamos começar pelo arquivo XML. O arquivo XML irá conter o nome das imagens que vão ser usadas como miniatura e da imagem grande, além da legenda que será exibida. Tanto o arquivo XML quanto as imagens precisam estar no mesmo diretório do arquivo FLA do Flash. Salvem o arquivo XML com o nome de imagens.xml.



    
        imagem.jpg
	imagemp.jpg
        Moto Ayrton Senna
    
    
        imagem1.jpg
	imagemp1.jpg
        Mclaren do Senna
    
    
        imagem2.jpg
	imagemp2.jpg
        Capacete Senna
    
    
        imagem3.jpg
	imagemp3.jpg
        Ferrari Shumacher
    
    
        imagem4.jpg
	imagemp4.jpg
        Loro
    
    
        imagem5.jpg
	imagemp5.jpg
        Trator do Sítio
    
    
        imagem6.jpg
	imagemp6.jpg
        Carroça antiga

Criando a Galeria

Vamos para o Flash montar nosso layout. Criem um arquivo em ActionScript 3 e o tamanho do palco de 550×550. Recomendo que criem as seguintes camadas para deixar o layout mais organizado.

Na camada ScrollBar, usaremos o ScrollBar criado por um de nossos colunistas de Flash, o Hugo Ferreira da Silva. Basta seguir o tutorial que ele fez, mudando o layout do ScrollBar para ficar na horizontal. Segue o link do tutorial:

ScrollBar para MovieClips e TextFields

Além da mudança do layout, vamos modificar o ActionScript, pois o tutorial foi feito ActionScript 2, e com essas ações não irá funcionar. Por isso, utilizem as seguintes ações:

/* Importamos a Classe Tween */
import fl.transitions.Tween;
import fl.transitions.easing.*;
/* Variável para o intervalo */
var intervalo:Number = new Number();
/* Variáveis booleanas para saber quando o Scroll está indo para direita ou esquerda */
var esquerda:Boolean;
var direita:Boolean;
/* Variável que recebe o tamanho da mascara para o Scroll */
var mascara:Number;
/* Variável que armazena o alvo a ser movido */
var alvo = parent[alvo];
/* Variável que armazena a posição inicial do alvo */
var sy:Number = alvo.x;
/* Variável que armazena o width do track do ScrollBar */
var track_width:Number;
/* Mínimo valor em que o MovieClip track pode se movimentar no eixo X */
var minx:Number = Math.round(track.x);
/* Máximo valor em que o MovieClip track pode se movimentar no eixo X */
var maxx:Number = Math.round(track.x+track.width-pan.width);
/* Adicionamos um eventListener para o MovieClip pan */
/* Usaremos o evento de mouse MOUSE_DOWN chamando a função panPress */
/* Esse evento é equivalente ao onPress no ActionScript 2 */
pan.addEventListener(MouseEvent.MOUSE_DOWN, panPress);
/* Adicionamos um eventListener para o MovieClip track */
/* Usaremos o evento de mouse MOUSE_DOWN chamando a função trackPress */
/* Esse evento é equivalente ao onPress no ActionScript 2 */
track.addEventListener(MouseEvent.MOUSE_DOWN, trackPress);
/* Adicionamos um eventListener para o MovieClip bt_esq */
/* Usaremos o evento de mouse MOUSE_DOWN chamando a função btEsqPress */
/* Esse evento é equivalente ao onPress no ActionScript 2 */
bt_esq.addEventListener(MouseEvent.MOUSE_DOWN, btEsqPress);
/* Adicionamos um eventListener para o MovieClip bt_esq */
/* Usaremos o evento de mouse MOUSE_UP chamando a função btEsqRelease */
/* Esse evento é equivalente ao onRelease no ActionScript 2 */
bt_esq.addEventListener(MouseEvent.MOUSE_UP, btEsqRelease);
/* Adicionamos um eventListener para o MovieClip bt_dir */
/* Usaremos o evento de mouse MOUSE_DOWN chamando a função btDirPress */
/* Esse evento é equivalente ao onPress no ActionScript 2 */
bt_dir.addEventListener(MouseEvent.MOUSE_DOWN, btDirPress);
/* Adicionamos um eventListener para o MovieClip bt_dir */
/* Usaremos o evento de mouse MOUSE_UP chamando a função btDirRelease */
/* Esse evento é equivalente ao onRelease no ActionScript 2 */
bt_dir.addEventListener(MouseEvent.MOUSE_UP, btDirRelease);
/* Função panPress disparada pelo eventListener do MovieClip pan */
function panPress(event:MouseEvent) {
	/* Definimos um limite para movimentar o MovieClip pan */
	var limite:Rectangle = new Rectangle(minx, pan.y, maxx-minx, pan.y);
	/* Inicia o drag dentro do limite */
	pan.startDrag(false, limite);
	/* Adicionamos um listener ao palco (stage) para disparar a função panRelease */
	/* Usa esse listener no palco, pois o ActionScript 3 não possui o evento onReleaseOutside */
	/* E por isso precisa adicionar um evento MOUSE_UP ao palco */
	/* Pois somente assim tem como verificar se aconteceu um onReleaseOutside */
	/* E mesmo que o usuário mantenha o mouse sobre o MovieClip será disparada essa função */
	stage.addEventListener(MouseEvent.MOUSE_UP, panRelease);
}
/* Função panRelease disparada pelo eventListener do stage */
function panRelease(event:MouseEvent) {
	/* Verifica se o alvo não é o MovieClip pan */
	if (event.target.name != pan) {
		/* Remove o eventListener do stage */
		stage.removeEventListener(MouseEvent.MOUSE_UP, panRelease);
	}
	/* Para o drag do MovieClip pan */
	pan.stopDrag();
}
/* Função trackPress disparada pelo eventListener do MovieClip track */
function trackPress(event:MouseEvent) {
	/* Move o MovieClip pan */
	pan.x = mouseX-pan.width/2;
	/* Se o MovieClip pan passar do valor máximo volta para o máximo */
	if (pan.x >= maxx) {
		/* Mantém o MovieClip pan na posição máxima */
		pan.x = maxx;
	}
	/* Se o MovieClip pan passar do valor mínimo */
	if (pan.x <= minx) {
		/* Mantém o MovieClip pan na posição mínima */
		pan.x = minx;
	}
}
/* Função btEsqPress disparada pelo eventListener do MovieClip bt_esq */
function btEsqPress(event:MouseEvent) {
	/* Diz que o MovieClip está se movendo para a esquerda */
	esquerda = true;
	/* Diz que o MovieClip não está se movendo para direita */
	direita = false;
}
/* Função btEsqRelease disparada pelo eventListener do MovieClip bt_esq */
function btEsqRelease(event:MouseEvent) {
	/* Diz que não há movimento do MovieClip */
	esquerda = false;
	direita = false;
}
/* Função btDirPress disparada pelo eventListener do MovieClip bt_dir */
function btDirPress(event:MouseEvent) {
	/* Diz que o MovieClip não está se movendo para esquerda */
	esquerda = false;
	/* Diz que o MovieClip está se movendo para a direita */
	direita = true;
}
/* Função btDirRelease disparada pelo eventListener do MovieClip bt_dir */
function btDirRelease(event:MouseEvent) {
	/* Diz que não há movimento do MovieClip */
	esquerda = false;
	direita = false;
}
/* Usaremos o setInterval para realizar o movimento do nosso alvo */
/* A cada 100 milesegundos chama a função mover */
intervalo = setInterval(mover, 100);
/* Função chamada pelo setInterval para realizar o movimento do alvo */
function mover() {
	/* Se o movimento é no sentido esquerdo */
	if (esquerda) {
		/* Verifica se não chegou a posição mínima */
		if (pan.x-1 > minx) {
			/* Movimenta o MovieClip pan */
			pan.x -= 10;
		} else {
			/* Mantém ele na posição mínima */
			pan.x = minx;
		}
	}
	/* Se o movimento é no sentido direito */
	if (direita) {
		/* Verifica se não chegou a posição máxima */
		if (pan.x+1 < (maxx-minx)) {
			/* Movimenta o MovieClip pan */
			pan.x += 10;
		} else {
			/* Mantém ele na posição máxima */
			pan.x = maxx;
		}
	}
	/* Calcula o movimento para mover o MovieClip alvo */
	var s:Number = ((pan.x-minx)/(maxx-minx))*100;
	var p:Number = (alvo.width-mascara)/100;
	/* Realiza o movimento do alvo */
	var teste:Tween = new Tween(alvo, "x", Back.easeOut, alvo.x, sy-(p*s), 1, true);
}

Precisamos dizer algumas coisas ao ScrollBar criado, quem ele deve mover, o tamanho da barra e o tamanho da mascara. Deixaremos igual a essa imagem:

Reparem uma coisa. Criei o scrollBar com largura de 450, então devo deixar o campo Altura da Mascara com o tamanho do ScrollBar. O campo Alvo preenchemos com o MovieClip que queremos que faça o scroll, e Altura da Barra, pode até deixar em branco que não vai influenciar em nada para nós.

Com o ScrollBar criado, vamos criar um MovieClip em branco, esse MovieClip será usado para receber os MovieClips que vão ser importados da biblioteca. Para criar um MovieClip em branco, basta ir no menu Insert, New Symbol. Coloquem esse MovieClip na camada Recebe e dêem instancia de recebe.

Desenhem no palco usando a ferramente Rectangle Tool um retangulo do tamanho que preferirem, esse retangulo vai ser a máscara para os MovieClips com as imagens em miniatura. Transformem esse retangulo em MovieClip (selecionem ele e apertem F8) e dêem instancia de mascara. Coloquem esse MovieClip na camada Máscara.

Por fim, desenhem um quadrado do tamanho que desejarem, esse quadrado vai ser a borda que vai ser formada em volta da imagem grande carregada. Transforme essa borda em um MovieClip (selecionem ele e apertem F8). Uma coisa super importante, esse MovieClip precisa ter o ponto de registro no meio, pois só assim ele irá crescer do centro para fora. A imagem abaixo mostra:

Dêem instancia de borda a esse MovieClip e o posicionem na camada Conteudo. Ainda nessa camada, iremos criar um campo de texto dinamico com instancia de porcento, esse campo é que vai mostrar a porcentagem carregada da imagem maior. Desenhem uma barrinha e a transformem em MovieClip, dêem instancia de preloader. Essa barrinha irá mostrar o quanto a imagem foi carregada. E para terminar o layout, criem mais um MovieClip em branco e dêem instancia de holder. O meu layout ficou assim:

Para terminar, precisamos criar mais um MovieClip, esse MovieClip será importado da biblioteca e irá carregar a imagem em miniatura. Só que antes de criarmos esse MovieClip, vamos criar um arquivo .as. Esse arquivo as irá ter as ações necessárias para criar um preloader para as imagens em miniaturas. Para criar esse arquivo AS, basta ir em File, New e selecionar a opção ActionScript File. Colem as seguintes ações nesse arquivo:

package {
	/* Importa as Classes usadas */
	import flash.display.MovieClip;
	import flash.events.ProgressEvent;
	import flash.display.Loader;
	import flash.events.Event;
	import flash.net.URLRequest;
	/* Criamos nossa Classe */
	public class preloaderPequeno extends MovieClip {
		/* Criamos uma instancia da Classe Loader */
		var loader:Loader = new Loader;
		/* Função publica que será iniciada a cada item importado da biblioteca */
		public function preloaderPequeno() {
			/* Desabilitamos evento de Mouse para o Loader */
			loader.mouseEnabled = false;
			/* Inserimos o Loader dentro do MovieClip alvo */
			this.alvo.addChild(loader);
		}
		/* Função publica para carregar a imagem pequena */
		public function carrega(arquivo:String):void {
			/* Carregamos o arquivo a partir da URL enviada */
			loader.load(new URLRequest(arquivo));
			/* Adicionamos um eventListener a instancia da Classe Loader */
			/* Esse listener irá disparar a função progressoEvento */
			/* Até que terminar de carregar a imagem pequena */
			loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressoEvento);
			/* Adicionamos um eventListener a instancia da Classe Loader */
			/* Esse listener irá disparara a função completo quando terminar de carregar a imagem */
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completo);
		}
		/* Função disparada pelo eventListener para indicar o progresso do carregamento da imagem */
		private function progressoEvento(event:ProgressEvent):void {
			/* Variável para saber quanto foi carregado */
			var carregado:Number = event.bytesLoaded;
			/* Variável para saber qual o tamanho da imagem */
			var total:Number = event.bytesTotal;
			/* Escalonamos no eixo Y o MovieClip barra */
			this.barra.scaleY = carregado/total;
		}
		/* Função disparada pelo eventListener ao terminar de carregar a imagem pequena */
		private function completo(event:Event):void {
			/* Esconde o MovieClip barra */
			this.barra.visible = false;
		}
	}
}

Salvem esse arquivo com o nome de preloaderPequeno.as e deixem ele no mesmo local de seu arquivo FLA.

Com a Classe criada, vamos a criação do MovieClip. Vão no menu Insert e selecionem Insert New Symbol. Na janela que aparecer, façam como mostra a imagem:

Vou explicar o porque disso. No campo Class, nós definimos um nome de Classe a ser usado para esse MovieClip. No ActionScript 2 nós identificamos um símbolo na biblioteca pelo campo Identifier, já no ActionScript 3 cada símbolo possui uma Classe. Além dessa Classe, podemos definir um Base Class, ou Classe de base. Essa Classe de base é uma Classe que será usada como base para nosso arquivo, onde podemos definir eventos, manipular valores, etc. Por padrão, a Classe base de um MovieClip é a Classe MovieClip do Flash, mas nós usaremos a nossa Classe criada acima.

Clicando em Ok, vamos criar nosso MovieClip. Mais uma vez para deixar mais organizado, criei três camadas dentro desse MovieClip, alvo, barra e fundo. Na camada alvo criem um MovieClip em branco e dêem instancia de alvo. Na camada barra, criem um quadrado do tamanho que desejar, tranformem em MovieClip e o instancie de barra, essa barra irá servir de preloader para a imagem pequena. E por fim na camada fundo, desenhem um quadrado do tamanho que desejar para ser a borda que vai ser exibida ao redor da imagem pequena. O meu MovieClip ficou assim:

O tamanho do fundo e da barra é livre. Eu desenhei o fundo um pouco maior que o tamanho das imagens em miniaturas, e o MovieClip barra possui o tamanho exato das imagem em miniatura.

Com nossos objetos criados e instanciados corretamente, vamos ao ActionScript da galeria. Voltem ao palco principal, no primeiro frame da camada Actions, insiram as seguintes ações:

/* Importamos a Classe Tween */
import fl.transitions.Tween;
import fl.transitions.easing.*;
/* Mascaramos o MovieClip recebe */
recebe.mask = mascara;
/* Importamos os eventos da Classe Tween */
import fl.transitions.TweenEvent;
/* Variável para saber qual a foto atual */
var atual:Number = new Number();
/* Variável para saber qual o número de itens do XML */
var total:Number = undefined;
/* Variável booleana para saber se terminou de carregar a imagem */
var carregado:Boolean = false;
/* Criamos uma instancia para a Classe Loader */
var loader:Loader = new Loader();
/* Criamos uma instancia para a Classe XML */
var dadosXML:XML = new XML();
/* Criamos uma instancia para a Classe URLLoader */
var xmlLoader:URLLoader = new URLLoader();
/* Adicionamos um eventListener para a instancia da Classe URLLoader */
/* Esse listener será disparado quando carregar o arquivo XML */
/* O listener irá chamar a função monta */
xmlLoader.addEventListener(Event.COMPLETE, monta);
/* Carrega o arquivo XML */
xmlLoader.load(new URLRequest("imagens.xml"));
/* Função disparada quando terminar de carregar o XML */
function monta(event:Event) {
	/* Armazena o XML */
	dadosXML = new XML(event.target.data);
	/* Armazena o total de nós foto do XML */
	total = dadosXML.foto.length();
	/* Chama a função montaPequeno */
	montaPequeno();
	/* Chama a função carregaImagem */
	/* Passa como parametro o primeiro no do XML */
	carregaImagem(0);
	/* Modifica a variável atual para 0 */
	atual = 0;
}
/* Função montaPequeno que irá criar e colocar no palco as miniaturas */
function montaPequeno() {
	/* Para cada item do XML */
	for (var i = 0; i
Exemplo galeria funcionando
Considerações Finais
Hoje vimos como criar uma galeria de imagens com XML usando ActionScript 3. Mais uma vez peguei um tutorial que desenvolvi em ActionScript 2 e passei para ActionScript 3, e posso dizer a vocês que se aprende e muito fazendo essa migração, pois nem sempre a migração é feita de maneira fácil, temos que buscar alguma solução, tentar criar algo melhor, etc. Fica a dica, peguem seus aplicativos de ActionScript 2 e tentem passar para o ActionScript 3, vocês vão ver que se aprende bastante com isso.
Gostaria de aproveitar a oportunidade e convidar todos os leitores a visitarem meu Portfolio Online, lá você poderão encontrar todos os meus trabalhos e tutoriais desenvolvidos: http://www.natanalves.com
Um abraço a todos e até a próxima.
Autor: Natan D. Alves - Moderador do Fórum de Flash & ActionSctipt MXSTUDIO
Qualquer dúvida envie um e-mail para natanalves@mxstudio.com.br ou acesse nosso fórum

Criando janelas personalizadas

Natan D. Alves — Thu, 31 Jul 2008 22:57:55 +0000

Olá comunidade.

Nesse meu segundo tutorial sobre o Adobe AIR, irei mostrar como criar um aplicativo usando uma janela personalizada. Nessa janela, poderemos minimizar, maximizar, fechar e mover o aplicativo usando um layout personalizado, diferente das janelas padrões dos Sistemas Operacionais.

Pré-requisitos para esse tutorial:

Flash CS3 com atualização para o Adobe AIR
Adobe AIR

Para os que não sabem como instalar o Adobe AIR no seu computador ou atualizar o Flash, nesse tutorial eu mostro como fazer.

http://www.mxstudio.com.br/adobe-air/criando-aplicativos-air-no-flash-cs3

Criando sua janela

A criação da janela é livre, criem o desing que bem preferirem. Para esse tutorial irei usar o visual das janelas dos Mac OS da Apple. Comecei com um palco com dimenções de 540×340, desenhei três retangulos, um servirá como o topo da janela, outro será a área do conteúdo e o terceiro o rodapé da janela (como se fosse a barra de status). Selecionem os três retangulos e os coloquem em um MovieClip com instancia de janela. O MovieClip que criei ficou menor que o tamanho original do palco, pois decidi usar o filtro Glow para dar um efeito mais legal a janela.

No palco, criem seus botões de Fechar, Minimizar e Maximizar, dêem instancia de fechar, minimizar e maximizar respectivamente. Criem um campo de texto para ser usado como título de nossa janela, dêem instancia de campo a esse campo de texto. E por último, criem um MovieClip que será usado para dimencionar a nossa janela, dêem instancia de aumentar.

A minha janela personalizada ficou assim:

Programando sua janela

Com nossa janela criada, vamos ao ActionScript, tirando a parte em que a janela é maximizada ou dimencionada a programação é bem tranquila. Coloquem as seguintes ações no primeiro frame de seu arquivo:

/* Importamos a Classe */
import flash.desktop.NativeApplication;
/* Deixamos o conteúdo para ser alinhado no canto esquerdo superior */
stage.align = StageAlign.TOP_LEFT;
/* Manteremos a proporção do palco */
stage.scaleMode = StageScaleMode.NO_SCALE;
/* Variável para saber se a janela está Maximizada ou não */
var clicado:Boolean = false;
/* Posição inical do MovieClip janela */
var espaco:Number = janela.x;
/* Variável que armazena tamanho mínimo para o aplicativo */
var tamMin:Point = new Point(stage.stageWidth, stage.stageHeight);
/* Determinamos o tamanho mínimo do site */
stage.nativeWindow.minSize = tamMin;
/* Criamos um Listener para saber quando a janela será modifica */
stage.nativeWindow.addEventListener(NativeWindowBoundsEvent.RESIZE, modifica);
/* Criamos um Listener que será disparado quando clicar sobre a janela */
janela.addEventListener(MouseEvent.MOUSE_DOWN, movimenta);
/* Criamos um Listener que será disparado quando clicar no botão aumentar */
aumentar.addEventListener(MouseEvent.MOUSE_DOWN, aumenta);
/* Criamos um Listener que será disparado quando clicar no boão fechar */
fechar.addEventListener(MouseEvent.CLICK, fecha);
/* Criamos um Listener que será disparado quando clicar no botão minimizar */
minimizar.addEventListener(MouseEvent.CLICK, minimiza);
/* Criamos um Listener que será disparado quando clicar no botão maximizar */
maximizar.addEventListener(MouseEvent.CLICK, maximiza);
/* Função que será disparada quando clicar na janela */
function movimenta(event:MouseEvent):void {
   /* Movimentamos nossa janela */
   stage.nativeWindow.startMove();
}
/* Função que será dispara quando clicar no botão aumentar */
function aumenta(event:MouseEvent):void {
   /* Modificamos o tamanho de nosso aplicativo */
   /* O tamanho será modificado no canto interior direito */
   stage.nativeWindow.startResize(NativeWindowResize.BOTTOM_RIGHT);
}
/* Função que será disparada quando clicar no botão fechar */
function fecha(event:MouseEvent):void {
   /* Fechamos o aplicativo */
   stage.nativeWindow.close();
}
/* Função que será disparada quando clicar no botão minimizar */
function minimiza(event:MouseEvent):void {
   /* Minimizamos o aplicativo */
   stage.nativeWindow.minimize();
}
/* Função que será disparada quando clicar no botão maximizar */
function maximiza(event:MouseEvent):void {
   /* Se o aplicativo não está maximizado  */
   if (clicado == false) {
      /* Maximizamos ele */
      stage.nativeWindow.maximize();
      /* Trocamos o valor da variável */
      clicado = true;
      /* Escondemos o MovieClip aumentar */
      aumentar.visible = false;
   /* Se o aplicativo está maximizado */
   } else {
      /* Restauramos ele */
      stage.nativeWindow.restore();
      /* Trocamos o valor da variável */
      clicado = false;
      /* Exibe o MovieClip aumentar */
      aumentar.visible = true;
   }
}
/* Função que será disparada quando o aplicativo tiver seu tamanho alterado */
function modifica(event:NativeWindowBoundsEvent):void {
   /* Modificamos o tamanho do MovieClip janela */
   janela.width = stage.stageWidth-(espaco*2);
   janela.height = stage.stageHeight-(espaco*2);
   /* Movemos o campo de texto para o centro do palco */
   campo.x = (stage.stageWidth-campo.width)/2;
   /* Movemos o MovieClip aumentar */
   /* Provavelmente vocês terão que modificar essa parte conforme o seu layout */
   aumentar.x = janela.width-11;
   aumentar.y = janela.height-11;
}

Preparando seu arquivo

Agora falta pouco para terminar de criar nossa janela. Se testarem seus arquivos, vocês irão notar que a janela padrão do Sistema Operacional ainda está visível, precisamos dizer ao nosso arquivo para que ignore essa janela.

Para isso, basta irem ao menu Commands e selecionar a opção “AIR – Application and Installer Settings”. Uma nova janela será aberta, na opção Window style selecionem “Custom Chrome (opaque)” ou “Custom Chrome (transparent)”, a diferença entre o opaque para o transparent é que o opaque o fundo do Flash é preservado e o transparent o fundo é removido (igual ao que ocorre ao se usar o wmode no HTML).

Pronto, agora é só testar seu aplicativo com a sua janela personalizada.

Considerações finais

A chance de criar nossas janelas personalizadas sem dúvidas é uma das inúmeras vantagens do Adobe AIR. A única recomendação que faço é para que não abusem muito dessa opção, evitem criar janelas que sejam muito pesadas ou que tenham muitas coisas, a Adobe pede isso pois seu aplicativo poderá usar mais memória e processamento do computador podendo até travar.

No próximo tutorial, irei mostrar como criar um aplicativo Drag and Drop, ou seja, pegar um arquivo do seu computador e jogar no aplicativo e poder interagir com ele.

Gostaria de aproveitar a oportunidade e convidar todos os leitores a visitarem meu Portfolio Online, lá vocês poderão encontrar todos os meus trabalhos e tutoriais desenvolvidos: http://www.natanalves.com/

Um abraço a todos e até a próxima.

Autor: Natan D. Alves – Moderador do Fórum de Flash & ActionSctipt MXSTUDIO

Qualquer dúvida envie um e-mail para natanalves@mxstudio.com.br ou acesse nosso fórum

Criando aplicativos AIR no Flash CS3

Natan D. Alves — Mon, 30 Jun 2008 12:07:07 +0000

Olá comunidade.

Inaugurando a nova seção de tutoriais do MXStudio, irei mostrar a vocês sobre uma nova tecnologia lançada pela Adobe a um certo tempo, o Adobe AIR.

Adobe Integrated Runtime, antes conhecido como Apollo, é uma nova tecnologia desenvolvida pela Adobe para rodar aplicativos em seu Desktop. Isso mesmo, aplicativos que você cria para a Web poderão ser usados para rodar em qualquer computador que tenha o AIR instalado.

O que você precisa para criar aplicativos em AIR:

Flash CS3
Flex 3
Dreamweaver CS3 (criação usando AJAX)

Hoje, irei mostrar como criar um aplicativo em AIR usando o Flash CS3.

Preparando-se para o AIR

Antes de ir para o Flash, vocês precisam baixar uma atualização para que o Flash possa criar arquivos em AIR. Para isso, basta ir ao site da Adobe e baixar o último update para o Flash CS3.

http://www.adobe.com/support/flash/downloads.html

Além desse update, vocês precisam baixar a última versão do Adobe AIR para conseguir rodar seus aplicativos.

http://get.adobe.com/air/

Iniciando Adobe AIR no Flash

Após instalarem o update do Flash e o Adobe AIR em sua máquina, vamos para o Flash criar nosso primeiro aplicativo em AIR. Abrindo o Flash, vocês irão notar uma nova opção de arquivo na tela inicial do Flash:

Ao criar o arquivo o Flash irá mostrar um pequeno aviso sobre o AIR.

Caso essa tela inicial do Flash não é exibida para vocês não se preocupem, para criar um arquivo AIR basta criar um novo arquivo no Flash, pode ser em ActionScript 2 ou ActionScript 3, abrir o painel Publish Settings (Ctrl+Shift+F12), clicando na aba Flash, na opção “Version” selecionem Adobe AIR 1.0. Se reparar, o campo “ActionScript version” é desabilitado porque aplicativos em AIR só rodam usando o ActionScript 3, por isso o AIR só funciona para os usuários do Flash CS3 e Flex 3.

A primeira vista, não existe nada diferente em relação a um arquivo em Flash normal, a diferença está quando testamos o aplicativo. Em um arquivo em Flash normal quando testamos ele (Ctrl+Enter) ele não roda no Flash Player e sim em uma janela do AIR.

Bom, chegou a hora de criar nossa aplicação. Sintam-se livre para fazer qualquer coisa em seu aplicativo, podemos usar qualquer coisa nele, usar Componentes, usar ActionScript, animação quadro a quadro, motion tween, frames, cenas, tudo, exatamente o que faríamos em uma aplicação voltada para a Web.

Para esse tutorial irei criar algo simples, usarei o logo do MXStudio e um pequeno texto que carregarei de um arquivo de texto. Criem um campo de texto dinâmico com instancia de texto, arrastem o Componente UIScrollBar para cima do campo de texto e de instancia de scrollBar. Com o Componente selecionado, abra o painel Parameters e vejam se o campo scrollTargetName está preenchido com o valor “texto” que é a instancia do se campo de texto dinâmico. Agora, coloquem as seguintes ações no frame que seu campo de texto se encontra:

/* Cria uma nova instancia da Classe URLLoader */
var carrega:URLLoader = new URLLoader();
/* Carregamos o arquivo txt */
carrega.load(new URLRequest("lorem.txt"));
/* Criamos um listener para saber quando terminou de carregar */
carrega.addEventListener(Event.COMPLETE, exibe);
/* Função acionada quando o texto termina de carregar */
function exibe(event:Event):void {
   /* Mostramos o texto */
   texto.text = event.target.data;
   /* Dizemos ao ScrollBar qual campo de texto mover */
   scrollBar.scrollTarget = texto;
}

Com seu aplicativo criado, iremos agora criar o arquivo .air, esse arquivo é o arquivo que vocês poderão enviar a outros usuários para que eles possam instalar o seu aplicativo. Para criar seu aplicativo, vocês precisam primeiro salvar seu arquivo em seu HD.

Com seu arquivo salvo, para criar o aplicativo iremos a opção Comands localizado no menu superior do Flash e selecionaremos a opção “AIR – Application and Installer Settings”. Um novo menu é aberto com um monte de opões para a criação do arquivo AIR:

Legenda:
1- aqui vocês colocam informações a respeito do aplicativo, o nome do arquivo, o nome do aplicativo, um ID para se diferenciar dos demais, a versão do aplicativo, alguma descrição e os direitos sobre ele. Eu recomendo mudar apenas os campos File name, Name, Description e Copyright para não gerar nenhum outro tipo de problema.

1a- Na opção “Window style” vocês podem escolher a forma que o arquivo AIR irá aparecer na tela, existem as opções “System Chrome” que usa a janela no estilo do sistema operacional que o aplicativo for instalado, “Custom Chrome (opaque)” com essa opção nossa janela não terá a aparência de nenhum sistema operacional, com essa opção nós podemos criar as janelas que desejarmos com os botões de minimizar, maximizar e fechar personalizados, e a última opção é “Custom Chrome (transparent)”, que funciona da mesma maneira da anterior, a diferença é que seu palco fica totalmente transparente.

1b- Podemos escolher o ícone para nossa aplicação. O ícone precisa ser no formatao PNG.

1c- Nessas opções avançadas, podemos definir um tamanho inical de nossa aplicação, a posição que o programa deve iniciar quando aberto, se queremos botões se maximizar, minimizar, fechar e podemos ainda definir em qual local o programa será instalado e o local dele no menu iniciar.

2- aqui se escolherem a opção “Use custom application descriptor file” vocês podem usar algum arquivo XML que contém essas informações.

3a- aqui escolhemos o certificado digital que usaremos (explicado mais a frente).

3b- o local onde o arquivo .air será salvo.

3c- arquivos que incluiremos em nosso projeto, os arquivos inclusos nessa opção estarão dentro do pacote AIR, se você criar alguma galeria por exemplo, pode incluir as fotos, os arquivo XMLs entre outros arquivos que façam parte da aplicação.

Para esse aplicativo que estamos criando, devemos incluir o arquivo de texto usado para que o programa possa funcionar corretamente. Portanto, basta clicar no botão com o símbolo de + e adicionar o arquivo de texto que estiverem usando. Se não fizermos isso, quando o usuário instalar o aplicativo nada será exibido porque ele não tem o arquivo de texto.

Digital signature

Nós teremos que criar um certificado digital que usaremos em todos os nossos aplicativos feitos para o AIR. Mas porque isso? Simples, um aplicativo em AIR é como um programa rodando em nosso sistema operacional, e como todo programa tem acesso a dados e outras informações em nosso HD. Um Certificado digital nos dá uma pequena garantia de que esse programa não irá interferir em nada em nosso sistema operacional.

Podemos comprar um certificado digital ou criar o nosso próprio arquivo digital pelo Flash. Criando um certificado digital pelo Flash é uma boa para os que querem aprender mais sobre o AIR, aos que desejam comercializar esses aplicativos é uma boa comprar um certificado.

Para criar seu certificado digital, iremos de novo a tela de opções ”AIR – Application and Installer Settings” no menu Commands do Flash. Com a janela aberta clicaremos na opção “Change”:

Uma nova janela é aberta, nela selecionaremos a opção ”Sign the AIR file with a digital certificate” e depois a opção Create. Mais um menu será exibido, nele vocês irão preencher com as suas informações como nome, organização, país e criar uma senha para esse arquivo, essa senha será usada em todos os arquivos AIR que desejar criar com esse certificado digital. Escolham o local no qual esse certificado será salvo e clique em Ok.

Se tudo estiver certo uma mensagem de sucesso será exibida pelo Flash dizendo que o certificado digital foi criado com sucesso.

Agora selecionem o seu certificado criado, coloquem a senha que criaram para ele, vocês podem selecionar a opção “Remember password for this sesssion”, com ela selecionada vocês não precisam ter que digitar a senha do certificado sempre que criar o arquivo AIR.

Agora basta clicar na opção Publish AIR File, e se tudo estiver correto, aparecerá uma mensagem de que o arquivo AIR foi criado com sucesso.

Com nosso arquivo gerado, vamos instalar ele em nossa máquina e ver se tudo está funcionando corretamente. Basta dar um duplo clique sobre o arquivo AIR e uma nova janela será aberta:

Selecionamos aonde desejamos instalar o aplicativo, se desejamos que ele tenha um atalho em nossa área de trabalho e se queremos que ele seja iniciado quando terminar a instalação. Com a instalação terminada, nosso aplicativo é exibido da mesma maneira quando testamos ele no Flash.

Uma coisa bem legal de aplicativos em AIR é que eles realmente parecem ser um programa, se vocês estiverem usando Windows poderão acessar ele pelo Menu Iniciar. E como é um aplicativo, para remover ele de seu computador vocês precisam desinstalar ele, usando a opção Adicionar/Remover programa do Windows.

Considerações finais

Adobe AIR é mais uma nova tecnologia desenvolvida pela Adobe que promete revolucionar o modo como os aplicativos voltados para Desktop são criados. Não tem como não ficar animado com essa nova tecnologia, que está apenas começando mas já promete muito.

Nos próximos tutoriais que irei escrever sobre essa nova tecnologia irei mostrar como criar aplicativos usando janelas personalizadas, interação com arquivos no computador do usuário usando “Drag and Drop” entre outras novidades que irei descobrir e compartilhar com vocês.

Um abraço a todos e até a próxima.

Autor: Natan D. Alves – Moderador do Fórum de Flash & ActionSctipt MXSTUDIO

Qualquer dúvida envie um e-mail para natanalves@mxstudio.com.br ou acesse nosso fórum

Formulário E-mail Flash+PHP

Natan D. Alves — Fri, 02 May 2008 01:25:15 +0000

Olá comunidade.

Hoje, irei a mostrar a vocês como criar um formulário de E-mail usando PHP e Flash. Irei mostrar como criar esse formulário para os usuários do ActionScript 2 e do ActionScript 3.

Pré requisitos para esse tutorial:

Flash CS3 usando ActionScript 3, Flash 8 ou Flash MX 2004
Conhecimento básico de ActionScript 2 ou 3
Servidor que de suporte a PHP e a função Mail

Criação do PHP

Antes de chegarmos a criação de nosso arquivo PHP, vocês precisam verificar se o servidor em que usam dá suporte a função mail do PHP. Para verificar isso, basta criar um arquivo PHP usando a função mail, como no exemplo abaixo:

mail(“seu email@dominio.com.br”, “assunto”, “mensagem”);
?>

Após a criação desse arquivo, hospedem ele em seu servidor visualize ele em seu browser. Se ao abrir o arquivo, nenhuma mensagem aparecer você tem suporte a função mail do PHP e pode criar um formulário, se aparecer alguma mensagem de erro vocês não poderão criar o formulário. A imagem a seguir mostra o erro que é exibido pelo PHP quando não tem suporte a função mail.

Vocês podem estar se perguntando, porque tem servidor que não dá suporte a função mail do PHP. Simples, controle contra SPAM. Existem vários usuários que aproveitam para ficar enviando mensagens sem que nós tenhamos conhecimento.

Aos que podem usar a função, vamos a criação do arquivo PHP que vai receber os dados vindos do Flash e enviar o E-mail. Salvem esse arquivo com o nome de contato.php.

/* Valores enviados pelo Flash */
/* Para esse tutorial irei enviar 5 valores */
/* Fiquem livres a enviar quantos valores quiserem */
$nome = utf8_decode(@$_POST['nome']);
$email = utf8_decode(@$_POST['email']);
$cidade = utf8_decode(@$_POST['cidade']);
$assunto = utf8_decode(@$_POST['assunto']);
$mensagem = utf8_decode(@$_POST['mensagem']);
$news = utf8_decode(@$_POST['news']);
$programas = utf8_decode(@$_POST['programas']);
/* Coloquem seu E-mail aqui */
$para = “seu email@dominio.com.br”;
/* Aqui uma pequena verificação para evitar que enviem E-mails sem valores */
if ($nome != “” && $email != “” && $cidade != “” && $assunto != “” && $mensagem != “”) {
/* Montamos o E-mail */
/* Criei um exemplo bem simples de E-mail usando HTML */
/* Fiquem livres para modificar conforme desejam */
$corpo = ‘’.$assunto.’’;
$corpo .= ‘Nome: ‘.$nome.’
E-mai: ‘.$email.’
Quer receber a Newsletter: ‘.$news.’
’;
$corpo .= ‘Programas usados: ‘.$programas.’
’;
$corpo .= ‘Cidade: ‘.$cidade.’
Assunto: ‘.$assunto.’
Mensagem: ‘.$mensagem;
/* Aqui modificamos o tipo de E-mail para o formato HTML */
$headers = ‘MIME-Version: 1.0′ . “\r\n”;
$headers .= ‘Content-type: text/html; charset=iso-8859-1′ . “\r\n”;
/* Aqui mudamos o cabeçalho para exibir o E-mail de quem enviou */
$headers .= ‘From:’. $email . “\r\n”;
/* Por fim enviamos o E-mail com os dados recebidos do Flash */
mail($para, $assunto, $corpo, $headers);
/* Retornamos um Ok para o Flash */
print ‘erro=0′;
/* Caso os campos não sejam preenchidos */
} else {
/* Retorna o erro ao Flash */
print ‘erro=1′;
}
?>

Pulando para o Flash

Chegou a hora de ir para o Flash. Como disse no começo do tutorial, esse tutorial serve tanto para usuários do ActionScript 3 quanto para usuários do ActionScript 2. Para esse tutorial começarei com um palco de tamanho 470×300, criem duas camadas, ações e objetos.

Montem o layout que preferir para o Formulário, a quantidade de campos é livre, assim como o uso de Componentes. Vou aproveitar esse tutorial e mostrar como usar os Componentes ComboBox, CheckBox e RadioButtons. O layout que montei está abaixo, as linhas em vermelho são as instancias dos objetos, lembre-sem de colocar os objetos no primeiro frame da camada objetos.

Os botões possuem instancia de limpar_btn e enviar_btn respectivamente. Os CheckBoxs possuem instancia de dream_ch, fire_ch, flash_ch, illus_ch e photo_ch respectivamente.

Com os nossos objetos no palco, vamos ao ActionScript. Primeiro, aos usuários que usam o ActionScript 2. Colem as ações abaixo no primeiro frame da camada ações:

 /* Criamos um Array para preencher o ComboBox cidades */
var cidades:Array = ["São Paulo", "Rio de Janeiro", "Belo Horizonte", "Porto Alegre", "Outra cidade"];
/* Preenchemos o ComboBox com os valores do Array */
cidade_cb.dataProvider = cidades;
/* Criamos um Array para preencher o ComboBox assunto */
var assunto:Array = ["Dúvidas", "Sugestões", "Elogios", "Reclamações", "Outros"];
/* Preenchemos o ComboBox com os valores do Array */
assunto_cb.dataProvider = assunto;
/* Criamos uma variável para armazenar os valores do CheckBox selecionados */
var programas:String = new String();
/* Criamos uma instancia para a Classe LoadVars */
var envia:LoadVars = new LoadVars();
/* Ao clicar do botão enviar */
enviar_btn.onPress = function() {
   /* Verifica se preencheu o campo nome */
   if (nome_txt.text == "") {
      /* Mostra a mensagem de erro */
      status_txt.text = "Preencha o campo Nome corretamente";
   /* Verifica se preencheu o campo email */
   } else if (email_txt.text == "") {
      /* Mostra a mensagem de erro */
      status_txt.text = "Preencha o campo E-mail corretamente";
   } else if ((email_txt.text.indexOf("@") == -1 || email_txt.text.indexOf(".") == -1)) {
      /* Mostra a mensagem de erro */
      status_txt.text = "Preencha o campo E-mail corretamente";
   /* Verifica se preencheu o campo mensagem */
   } else if (mensagem_txt.text == "") {
      /* Mostra a mensagem de erro */
      status_txt.text = "Preencha o campo Mensagem corretamente";
   /* Verifica se selecionou a opção sim ou opção não do RadioButton */
   } else if (sim.selected == false && nao.selected == false) {
      /* Mostra a mensagem de erro */
      status_txt.text = "Selecione Sim ou Não";
   /* Se tudo estiver ok */
   } else {
      /* Envia para o PHP a variavel nome com os dados do campo nome */
      envia.nome = nome_txt.text;
      /* Envia para o PHP a variavel email com os dados do campo email */
      envia.email = email_txt.text;
      /* Envia para o PHP a variavel cidade com o valor selecionado no ComboBox cidade */
      envia.cidade = cidade_cb.value;
      /* Envia para o PHP a variavel assunto com o valor selecionado no ComboBox assunto */
      envia.assunto = assunto_cb.value;
      /* Envia para o PHP a variavel mensagem com os dados do campo mensagem */
      envia.mensagem = mensagem_txt.text;
      /* Verifica se a opção sim foi selecionado no RadioButton */
      if (sim.selected == true) {
         /* A opção sim foi selecionada */
         /* Envia para o PHP a variavel news com o valor sim */
         envia.news = "sim";
      /* Verifica se  a opção não foi selecionado no RadioButton */
      } else if (nao.selected == true) {
         /* A opção nao foi selecionada */
         /* Envia para o PHP a variavel news com o valor não */
         envia.news = "não";
      }
      /* Verifica se o CheckBox Dreamweaver foi selecionada */ 
      if (dream_ch.selected == true) {
         /* A opção foi selecionada */
         /* Armazena na variável programas o valor Dreamweaver */
         programas = "Dreamweaver, ";
      }
      /* Verifica se o CheckBox Fireworks foi selecionada */ 
      if (fire_ch.selected == true) {
         /* A opção foi selecionada */
         /* Armazena na variável programas o valor Fireworks */
         programas += "Fireworks, ";
      }
      /* Verifica se o CheckBox Flash foi selecionada */ 
      if (flash_ch.selected == true) {
         /* A opção foi selecionada */
         /* Armazena na variável programas o valor Flash */
         programas += "Flash, ";
      }
      /* Verifica se o CheckBox Illustrator foi selecionada */ 
      if (illus_ch.selected == true) {
         /* A opção foi selecionada */
         /* Armazena na variável programas o valor Illustrator */
         programas += "Illustrator, ";
      }
      /* Verifica se o CheckBox Photoshop foi selecionada */
      if (photo_ch.selected == true) {
         /* A opção foi selecionada */
         /* Armazena na variável programas o valor PhotoShop */
         programas += "Photoshop.";
      }
      /* Envia para o PHP a variavel programas o valor da variável programas */
      envia.programas = programas;
      /* Avisa que está mandando o E-mail */
      status_txt.text = "Enviando mensagem";
      /* Enviamos as variáveis ao PHP e carregamos a mensagem que vai vir do PHP */
      envia.sendAndLoad("http://localhost/contato.php", envia, "POST");
   }
};
/* Assim que o PHP for carregado */
envia.onLoad = function(ok) {
   /* Se carregou tudo certinho */
   if (ok) {
      /* Se deu tudo ok no PHP */
      if (this.erro == 0) {
         /* Chamamos a função limpa */
         limpa();
         /* Mostra mensagem de sucesso */
         status_txt.text = "Mensagem enviada com sucesso";
      } else {
         /* Mostra mensagem de erro */
         status_txt.text = "Erro ao enviar E-mail";
      }
   }
};
/* Ao clicar do botão limpar */
limpar_btn.onPress = function() {
   /* Chamamos a função limpa */
   limpa();
};
/* Função responsável por limpar os campos do formulário */
function limpa() {
   /* Zeramos a variável programas */
   programas = "";
   /* Apagamos os campos de texto */
   nome_txt.text = "";
   email_txt.text = "";
   mensagem_txt.text = "";
   status_txt.text = "";
   /* Voltamos a selecionar o primeiro item dos ComboBox */
   assunto_cb.selectedIndex = 0;
   cidade_cb.selectedIndex = 0;
   /* Deixamos os RadioButtons não selecionados */
   sim.selected = false;
   nao.selected = false;
   /* Deixamos os RadioButtons não selecionados */
   dream_ch.selected = false;
   fire_ch.selected = false;
   flash_ch.selected = false;
   illus_ch.selected = false;
   photo_ch.selected = false;
}

Agora para os usuários do ActionScript 3. Colem as ações abaixo no primeiro frame da camada ações.

/* Importamos a Classe DataProvider */
import fl.data.DataProvider;
/* Criamos um Array para preencher o ComboBox cidades */
var cidades:Array = ["São Paulo", "Rio de Janeiro", "Belo Horizonte", "Porto Alegre", "Outra cidade"];
/* Preenchemos o ComboBox com os valores do Array */
cidade_cb.dataProvider = new DataProvider(cidades);
/* Criamos um Array para preencher o ComboBox assunto */
var assunto:Array = ["Dúvidas", "Sugestões", "Elogios", "Reclamações", "Outros"];
/* Preenchemos o ComboBox com os valores do Array */
assunto_cb.dataProvider = new DataProvider(assunto);
/* Criamos uma variável para armazenar os valores do CheckBox selecionados */
var programas:String = new String();
/* Criamos uma instancia da Classe URLVariables */
var variaveis:URLVariables = new URLVariables();
/* Criamos uma instancia da Classe URLRequest */
var objEnvia:URLRequest = new URLRequest();
/* Criamos uma instancia da Classe URLLoader */
var objRecebe:URLLoader = new URLLoader();
/* Adicionamos um listener ao botão limpar */
limpar_btn.addEventListener(MouseEvent.MOUSE_DOWN, limparPress);
/* Função disparada quando se clica no botão limpar */
function limparPress(event:MouseEvent):void {
   /* Chamamos a função limpa */
   limpa();
}
/* Adicionamos um listener ao botão enviar */
enviar_btn.addEventListener(MouseEvent.MOUSE_DOWN, enviarPress);
/* Função disparada quando se clica no botão enviar */
function enviarPress(event:MouseEvent):void {
   /* Verifica se preencheu o campo nome */
   if (nome_txt.text == "") {
      /* Mostra a mensagem de erro */
      status_txt.text = "Preencha o campo Nome corretamente";
   /* Verifica se preencheu o campo email */
   } else if (email_txt.text == "") {
      /* Mostra a mensagem de erro */
      status_txt.text = "Preencha o campo E-mail corretamente";
   /* Verifica se preencheu o campo mensagem */
   } else if ((email_txt.text.indexOf("@") == -1 || email_txt.text.indexOf(".") == -1)) {
      /* Mostra a mensagem de erro */
      status_txt.text = "Preencha o campo E-mail corretamente";
   } else if (mensagem_txt.text == "") {
      /* Mostra a mensagem de erro */
      status_txt.text = "Preencha o campo Mensagem corretamente";
   /* Verifica se selecionou a opção sim ou opção não do RadioButton */
   } else if (sim.selected == false && nao.selected == false) {
      /* Mostra a mensagem de erro */
      status_txt.text = "Selecione Sim ou Não";
   /* Se tudo estiver ok */
   } else {
      /* Envia para o PHP a variavel nome com os dados do campo nome */
      variaveis.nome = nome_txt.text;
      /* Envia para o PHP a variavel email com os dados do campo email */
      variaveis.email = email_txt.text;
      /* Envia para o PHP a variavel cidade com o valor selecionado no ComboBox cidade */
      variaveis.cidade = cidade_cb.value;
      /* Envia para o PHP a variavel assunto com o valor selecionado no ComboBox assunto */
      variaveis.assunto = assunto_cb.value;
      /* Envia para o PHP a variavel mensagem com os dados do campo mensagem */
      variaveis.mensagem = mensagem_txt.text;
      /* Verifica se a opção sim foi selecionado no RadioButton */
      if (sim.selected == true) {
         /* A opção sim foi selecionada */
         /* Envia para o PHP a variavel news com o valor sim */
         variaveis.news = "sim";
      /* Verifica se  a opção não foi selecionado no RadioButton */
      } else if (nao.selected == true) {
         /* A opção nao foi selecionada */
         /* Envia para o PHP a variavel news com o valor não */
         variaveis.news = "não";
      }
      /* Verifica se o CheckBox Dreamweaver foi selecionada */
      if (dream_ch.selected == true) {
         /* A opção foi selecionada */
         /* Armazena na variável programas o valor Dreamweaver */
         programas = "Dreamweaver, ";
      }
      /* Verifica se o CheckBox Fireworks foi selecionada */
      if (fire_ch.selected == true) {
         /* A opção foi selecionada */
         /* Armazena na variável programas o valor Fireworks */
         programas += "Fireworks, ";
      }
      /* Verifica se o CheckBox Flash foi selecionada */
      if (flash_ch.selected == true) {
         /* A opção foi selecionada */
         /* Armazena na variável programas o valor Flash */
         programas += "Flash, ";
      }
      /* Verifica se o CheckBox Illustrator foi selecionada */
      if (illus_ch.selected == true) {
         /* A opção foi selecionada */
         /* Armazena na variável programas o valor Illustrator */
         programas += "Illustrator, ";
      }
      /* Verifica se o CheckBox Photoshop foi selecionada */
      if (photo_ch.selected == true) {
         /* A opção foi selecionada */
         /* Armazena na variável programas o valor PhotoShop */
         programas += "Photoshop.";
      }
      /* Envia para o PHP a variavel programas o valor da variável programas */
      variaveis.programas = programas;
      /* Avisa que está mandando o E-mail */
      status_txt.text = "Enviando mensagem";
      /* Dizemos que os dados a serem enviados está na variável variaveis */
      objEnvia.data = variaveis;
      /* Usaremos o método POST */
      objEnvia.method = URLRequestMethod.POST;
      /* Passamos o endereço a ser enviado */
      objEnvia.url = "http://localhost/contato.php";
      /* Dizemos que os dados serão do tipo texto */
      objRecebe.dataFormat = URLLoaderDataFormat.TEXT;
      /* Enviamos as variáveis ao PHP */
      objRecebe.load(objEnvia);
      /* Adicionamos um listener a variavel objRecebe */
      /* O listener será disparado quando terminar de carregar o arquivo PHP */
      objRecebe.addEventListener(Event.COMPLETE, onLoadRecebe);
   }
}
/* Quando o arquivo PHP for carregado */
function onLoadRecebe(event:Event):void {
   /* Recupera a mensagem que será enviada pelo PHP */
   var resultado:URLVariables = new URLVariables(event.currentTarget.data);
   /* Se deu tudo ok no PHP */
   if (resultado.erro == 0) {
      /* Chama a função limpa */
      limpa();
      /* Exibe mensagem de sucesso */
      status_txt.text = "Mensagem enviada com sucesso.";
   }
}
/* Função que limpa os campos do formulário */
function limpa() {
   /* Zeramos a variável programas */
   programas = "";
   /* Apagamos os campos de texto */
   nome_txt.text = "";
   email_txt.text = "";
   mensagem_txt.text = "";
   status_txt.text = "";
   /* Voltamos a selecionar o primeiro item dos ComboBox */
   assunto_cb.selectedIndex = 0;
   cidade_cb.selectedIndex = 0;
   /* Deixamos os RadioButtons não selecionados */
   sim.selected = false;
   nao.selected = false;
   /* Deixamos os RadioButtons não selecionados */
   dream_ch.selected = false;
   fire_ch.selected = false;
   flash_ch.selected = false;
   illus_ch.selected = false;
   photo_ch.selected = false;
}

Abaixo, um exemplo de como será o E-mail que você receberá por quem usar o formulário.

Considerações finais

Espero que tenha conseguido tirar a dúvida dos que sempre tentaram criar um formulário mas nunca conseguiam, o erro mais comum é não ter suporte a função mail do PHP, por isso não funcionavam achando sempre que o problema estava no Flash quando o problema era o PHP.

Um abraço a todos e até a próxima.

Autor: Natan D. Alves – Moderador do Fórum de Flash & ActionSctipt MXSTUDIO

Qualquer dúvida envie um e-mail para natanalves@mxstudio.com.br ou acesse nosso fórum

Galeria de Imagens ActionScript 3

Natan D. Alves — Sat, 12 Jan 2008 00:00:00 +0000

Olá Comunidade. Nesse meu primeiro tutorial voltado aos usuários do Flash CS3 e do ActionScript 3, irei mostrar criar uma Galeria de Imagens com XML. Essa galeria possui o mesmo efeito usado em um tutorial que fiz um tempo atrás usando ActionScript 2. Esse tutorial é para mostrar e ensinar algumas coisas sobre o ActionScript 3. Aos que nunca fizeram o tutorial, eis o link:

Galeria de Imagens com XML ActionScript 2

Pré-requisitos para esse tutorial

Flash CS3 usando ActionScript 3
Conhecimento básico de ActionScript 2 ou 3

Outro requisito para esse tutorial é ler uma matéria que eu fiz sobre as mudanças do ActionScript 3. Nesse artigo vocês encontrarão as principais mudanças e vão ajudar e muito no entendimento desse tutorial:

Algumas diferenças e novidades no ActionScript 3

Criando o XML

Vamos ao XML que conterá nossas Imagens e seus títulos. Salve o arquivo com o nome de imagens.xml.



   
      imagem.jpg
      Moto Ayrton Senna
   
   
      imagem1.jpg
      Mclaren do Senna
   
   
      imagem2.jpg
      Capacete Senna
   
   
      imagem3.jpg
      Ferrari Shumacher
   
   
      imagem4.jpg
      Loro
   
   
      imagem5.jpg
      Trator do Sítio
   
   
      imagem6.jpg
      Carroça antiga

Criando nossa Galeria

Vamos criar nossa galeria. Você poderá fazer da maneira que desejar. Comecei com um palco com dimenções de 550×420. Os nome em Vermelho são os nomes de instância de cada objeto.

holder: MovieClip em branco
borda: MovieClip com um retângulo desenhado dentro dele
preloader: MovieClip com uma barra desenhado dentro dele
porcento: campo de texto dinamico
ant: MovieClip para servir como botão
prox: MovieClip para servir como botão
texto: campo de texto dinamico

Os objetos podem posicionados em qualquer camada de seu arquivo, só tomem cuidado para posicionar o MovieClip holder acima do MovieClip borda. Uma coisa muito importante. Quando criar o MovieClip borda, ele tem que ter seu ponto de registro no meio. Como na Imagem:

Com nossos MovieClips criados e instanciados vamos ao ActionScript. Coloquem isso no frame dos os objetos criados anteriormente:

/* Importamos a Classe Tween */
import fl.transitions.Tween;
import fl.transitions.easing.*;
/* Importamos a Classe responsável pelos eventos da Classe Tween */
import fl.transitions.TweenEvent;
/* Criamos uma variável para armazenar o total de fotos no XML */
var total:Number = undefined;
/* Criamos uma instancia para a Classe XML */
var dadosXML:XML = new XML();
/* Criamos uma instancia para a Classe Loader */
/* Essa Classe vai carregar nossas imagens */
var loader:Loader = new Loader();
/* Criamos uma variável para saber qua a foto atual */
var fotoAtual:Number = 0;
/* Criamos ima instancia para a Classe URLoader */
/* Essa Classe vai carregar nosso arquivo XML */
var carregaXML:URLLoader = new URLLoader();
/* Adiciono um EventListener para a instancia da Classe URLLoader */
/* O evento será chamado quando a terminar de carregar o arquivo XML */
/* Quando terminar de carregar, chama a função monta */
carregaXML.addEventListener(Event.COMPLETE, monta);
/* Carregegamos o arquivo XML */
carregaXML.load(new URLRequest("imagens.xml"));
/* Função chamada ao carregar o arquivo XML */
function monta(event:Event) {
	/* Armazenamos nosso arquivo XML */
	dadosXML = new XML(event.target.data);
	/* Armazenamos o total de fotos no XML */
	total = dadosXML.foto.length();
	/* Chama a função mostraImagem chamando a primeira imagem */
	mostraImagem(0);
}
/* Função responsável por carregar as imagens do XML */
function mostraImagem(atual:Number):void {
	/* Descarrega qualquer imagem já carregada */
	loader.unload();
	/* Adiciono um EventListener para a instancia da Classe Loader */
	/* Esse listener será acionado sempre que a imagem estiver sendo carregada */
	/* Quando o listener for acionado, chamará a função loadProgress */
	loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);
	/* Adiciono um EventListener para a instancia da Classe Loader */
	/* Esse listener será acionado assim que a imagem terminar de ser carregada */
	/* Quando o listener for acionado, chamará a função loadComplete */
	loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
	/* Carregamos a imagem */
	loader.load(new URLRequest(dadosXML.foto.imagem[atual]));
	/* Carregamos a imagem dentro do MovieClip holder */
	holder.addChild(loader);
	/* Deixamos o MovieClip holder com alpha igual a 0 */
	holder.alpha = 0;
	/* Usamos o removeEventListener para desativar o evento CLICK da Classe MouseEvent */
	/* Removemos o evento CLICK dos MovieClips prox e ant */
	prox.removeEventListener(MouseEvent.CLICK, proxPress);
	ant.removeEventListener(MouseEvent.CLICK, antPress);
	/* Desativamos os botões ant e prox */
	prox.enabled = false;
	ant.enabled = false;
}
/* Função responsável por exibir o progresso do carregamento da imagem */
function loadProgress(Event:ProgressEvent) {
	/* Criamos uma variável para saber quando carregou */
	var carregado:Number = Event.bytesLoaded;
	/* Criamos uma variável para saber o tamanho da imagem */
	var tamanho:Number = Event.bytesTotal;
	/* Modifica o tamanho do MovieClip preloader conforme a imagem estiver sendo carregada */
	preloader.scaleX = carregado/tamanho;
	/* Exibe a porcentagem carregada */
	porcento.text = Math.round(carregado/tamanho*100)+"%";
}
/* Função responsável por exibir a imagem carregada */
function loadComplete(event:Event) {
	/* Mostramos o texto da imagem */
	texto.text = dadosXML.foto.texto[fotoAtual];
	/* Aumentamos o MovieClip borda para o mesmo tamanho do MovieClip holder */
	/* Acrescentamos 16px para poder fazer uma borda */
	var tww:Tween = new Tween(borda, "width", Back.easeOut, borda.width, holder.width+16, 1, true);
	var twh:Tween = new Tween(borda, "height", Back.easeOut, borda.height, holder.height+16, 1, true);
	/* Movemos o MovieClip holder */
	var twhx:Tween = new Tween(holder, "x", Back.easeOut, holder.x, borda.x-holder.width/2, 1, true);
	var twhy:Tween = new Tween(holder, "y", Back.easeOut, holder.y, borda.y-holder.height/2, 1, true);
	/* Movemos o MovieClip ant */
	var twant:Tween = new Tween(ant, "y", Back.easeOut, ant.y, (borda.y+holder.height/2)+8, 1, true);
	/* Movemos o MovieClip prox */
	var twpro:Tween = new Tween(prox, "y", Back.easeOut, prox.y, (borda.y+holder.height/2)+8, 1, true);
	/* Movemos o campo de texto dinamico */
	var twtxt:Tween = new Tween(texto, "y", Back.easeOut, texto.y, (borda.y+holder.height/2)+8+ant.height, 1, true);
	/* Adicionamos um EventListener para uma das instancias da Classe Tween criadas */
	/* Esse listener será disparado assim que o MovieClip holder terminar de se mover */
	/* Quando o listener for acionado, chamará a função termina */
	twhx.addEventListener(TweenEvent.MOTION_FINISH, termina);
}
/* Função chamada quando o MovieClip holder terminar de ser movido */
function termina(Event:TweenEvent) {
	/* Escondemos o MovieClip preloader */
	preloader.scaleX = 0;
	/* Apagamos o texto do campo porcento */
	porcento.text = "";
	/* Damos um efeito em alpha ao MovieClip holder */
	var twha:Tween = new Tween(holder, "alpha", Regular.easeOut, 0, 1, 1, true);
	/* Adicionamos um EventListener para a instancia da Classe Tween */
	/* Esse listener será disparado assim que o MovieClip holder tiver um alpha de 100% */
	/* Quando o listener for acionado, chamará a função alphaTerminou */
	twha.addEventListener(TweenEvent.MOTION_FINISH, alphaTerminou);
}
/* Função chamada quando o MovieClip holder tiver um alpha de 100% */
function alphaTerminou(Event:TweenEvent) {
	/* Adicionamos os EventListener novamente */
	prox.addEventListener(MouseEvent.CLICK, proxPress);
	ant.addEventListener(MouseEvent.CLICK, antPress);
	/* Habilitamos os MovieClips prox e ant */
	prox.enabled = true;
	ant.enabled = true;
}
/* Adicionamos um EventListener para os MovieClips prox e ant */
/* Esse listener será disparado assim que o Mouse for clicado sobre eles */
/* Quando o listener for acionado, chamará a função mudaImagem */
prox.addEventListener(MouseEvent.CLICK, proxPress);
ant.addEventListener(MouseEvent.CLICK, antPress);
/* Usando a propriedade buttonMode fazemos com que os MovieClips */
/* Passem a ter a mãozinha do Mouse */
prox.buttonMode = true;
ant.buttonMode = true;
/* Função que carrega uma outra imagem */
function proxPress(event:MouseEvent):void {
	/* Verifica se a foto atual é menor que o total de imagens */
	if (fotoAtual < (total-1)) {
		/* Incrementamos a variável fotoAtual */
		fotoAtual++;
		/* Chama a função mostraImagem */
		mostraImagem(fotoAtual);
	}
}
function antPress(event:MouseEvent):void {
	/* Verifica se a foto atual é maior que 0 */
	if (fotoAtual > 0) {
		/* Decrementa a variável fotoAtual */
		fotoAtual--;
		/* Chama a função mostraImagem */
		mostraImagem(fotoAtual);
	}
}

Aqui um Exemplo da Galeria funcionando.

Considerações Finais

O objetivo desse tutorial é fazer uma comparação da mesma galeria feita em ActionScript 2 dessa vez usando o ActionScript 3, ver quais funções mudaram, novas regras, etc. Não entrei em muitos detalhes sobre algumas funções pois esse não era o ojetivo principal, entrarei com mais detalhes em futuros tutoriais usando o ActionScript 3.

Uma dica aos que querem começar a aprender ActionScript 3, pegue seus projetos, tutoriais e aplicações feitas em ActionScript 2 tentem converter para o ActionScript 3. Apesar das novidades, não é tão complicado aprender se já tiver uma base no ActionScript 2, vocês irão se surpreender.

Um abraço a todos e até a próxima.

Autor: Natan D. Alves – Moderador do Fórum de Flash & ActionSctipt MXSTUDIO

Qualquer dúvida envie um e-mail para natanalves@mxstudio.com.br ou acesse nosso fórum