Primeiro crie uma aplicação em WPF e adicione um UserControl com o nome de UserControlCheckBox.xaml, modifique a altura e o tamanho para 100: Height=”100″ Width=”100″ e altere o fundo do layout GRID para “Black”. Dentro do layout GRID adicione uma Ellipse com o tamanho e altura de 20.

     Agora vamos criar um Style herdando as propriedades de um objeto CheckBox, selecione a Ellipse com o botão direito do mouse e clique em Make into Control… conforme a figura abaixo:

     Repita o processo para o evento Unchecked, neste momento temos o trigger conforme a listagem abaixo:

     Duas Storyboards foram criadas, para  trocar a imagem quando o CheckBox é acionado adicione o evento Completed na Storyboard OnChecked1 e adicione o código C# abaixo:

ImageBrush brush = (ImageBrush)this.Resources["imgb"];
Image image1 = new Image();
brush.ImageSource =
new BitmapImage(new Uri(“luz_apagada.png”, UriKind.Relative));

    Repita o processo no evento Completed da Storyboard OnUnchecked1 mudando somente a imagem:

brush.ImageSource = new BitmapImage(new Uri(“luz_ligada.png”, UriKind.Relative));

     Para finalizar o tutorial vamos animar as propriedades Opacity e Radius para simular uma luz no CheckBox inserindo um novo efeito ao controle, na Storyboard OnChecked1 adicione o código:

     E adicione o código abaixo na Storyboard OnUnchecked1:

     Adicione uma Ellipse entre o GRID Layout e o CheckBox e utilize o efeito BlurEffect que vai dar o efeito de luz no CheckBox:

    Agora é só adicionar o UserControl em seu projeto e testar.

Código fonte do tutorial : Clique aqui
Expression Blend 3 / Visual Studio 2008

Neste artigo eu vou mostrar como criar uma aplicação Silverlight para ser executada fora do browser (Silverlight Out-of-browser) com o Visual Studio 2010. Poderá desenvolver usando a versão 3 ou 4, sem problemas.

http://www.dowhile.com.br/artigos/silverlight/145-silverlight-out-of-browser-.html

Trigonometria

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

- PI:

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

Mas o que é visualmente este valor PI?

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

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

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

A definição de Radiano

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

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

Seno

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

Coseno

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

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

Problema 1:

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

Resposta:

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

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

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

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

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

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

Desafio:

- Desenhar os ponteiros

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

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


Cuidados:

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

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

Em continuação a série de tutoriais sobre AS3…

No ultimo tutorial terminamos com um painel personalizado e com a aplicação dos estudos sobre a estrutura das classes. Vamos passar a um novo ponto do actionscript, ponto em que vamos falar de efeitos e animações.. segue então a continuação…

6. Efeitos e Filtros

Como vimos anteriormente foram utulizados alguns efeitos (resize, move e parallel) que fizerem com que o nosso painel aumenta-se de tamanho e se coloca-se na devida posição indicada pelo move.

O AS3 do Flash traz algumas funções de animação (tween) mas são um pouco limitadas, mas aqui vou falar das funções de animação do AS3 no Flex, bem como alguns efeitos e também como criar a nossa propria função de animação e criar efeitos paralelos e sequenciais.

Começando pelos mais simples, um simples efeito de movimento feito programaticamente sem recurso aos efeitos nativos do flex..

6.1. Move – Movimento

Pretende-se movimentar uma imagem no ‘eixo dos xx’ desde x=0 até x=100, para isso facilmente conseguiria-mos perceber o seguinte código (…)
Leia o resto de Tutorial Action Script 3 – 016 (687 palavras)

© Mário Santos em TSW – That Should Work, 2010. |
Link Permanente |
Sem comentarios |
Adicionar ao
del.icio.us -
Stumble it -
Google Bookmark -
technorati


Mais artigos relacionados nas categorias:

Nesse tutorial vou mostrar como acessar dados do Twitter via XML pela URL de busca do Twitter, é um tutorial básico que visa trabalhar com uma simples integração.

Basicamente o que fazemos é acessar um XML gerado pela busca do Twitter e fazer o “parser” desses dados, esse tutorial não vai abordar o tema de inclusão desses resultados no Stage do Flash, apenas a obtenção desses resultados através de manipulação de XML.

Exemplo depois de uma pequena customização na classe Consome.as para incluir os “tweets” no layout.
Exemplo

Basicamente vamos trabalhar com 3 classes, são elas:

GetTweets.as

• Essa é a classe que vai fazer a conexão com o XML e vai tratar os dados

/**
 * @author: Lucas Marçal
 * @version: 1.0
 * @email: inbox@lucasmarcal.com.br
 * @link: www.lucasmarcal.com.br/blog
 */
package lmcosta.twitter
{
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.IOErrorEvent;
	import flash.events.SecurityErrorEvent;
	import flash.net.URLLoader;
	import flash.net.URLRequest;

	public class GetTweets extends MovieClip
	{
		internal var usuario			:String;
		internal var url				:String;
		internal var tag				:String;
		internal var qtdTweets		    :int;
		internal var arrTweets		    :Array;
		internal var dataTweets		    :Array;

		public function GetTweets() { }

		/**
		 *
		 * @param	_user:String;
		 * @param	_tag:String;
		 * @param	_qtd:Number;
		 */
		public function configTwitter(_user:String,_tag:String,_qtd:Number):void
		{
			this.usuario = _user;
			this.tag = _tag;
			this.qtdTweets = _qtd;
			this.carregaXML();
		}
		/**
		 * Responsavel pela chamada do XML
		 */
		public function carregaXML():void
		{
			this.url = "http://search.twitter.com/search.atom?q=+from:" + this.usuario + "&rpp=" + this.qtdTweets + "&tag=" + this.tag
			var urlReq:URLRequest =  new URLRequest(this.url);
			var loader:URLLoader = new URLLoader();

			loader.addEventListener(Event.COMPLETE, parserDados);
			loader.addEventListener(IOErrorEvent.IO_ERROR, IOError);
			loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, SError);

			this.addEventListener(TwitterEvents.PARSER_COMPLETO, onComplete);

			loader.load(urlReq);
		}
		/**
		 * Responsavel por tratar os dados vindos
		 * do XML
		 * @param	e:Event
		 */
		public function parserDados(e:Event):void
		{
			if (e.target.data)
			{
				this.arrTweets = new Array();
				this.dataTweets = new Array();

				var twitterXML:XML =  new XML(e.target.data);
				var tweetList:XMLList = twitterXML.children();

				var tweetItem:String;
				var timeItem:String;

				for (var i:int = 0; i < tweetList.length(); i++)
				{
					//Assim traz o HTML
					//tweetItem = tweetList[i].*::content;
					tweetItem = tweetList[i].*::title;
					timeItem = tweetList[i].*::published;

					if (timeItem != "")
					{
						timeItem = timeItem.split("T").join(" - ");
						timeItem = timeItem.split("Z").join("");
						dataTweets.push(timeItem);
						arrTweets.push(tweetItem + dataTweets);
					}
				}
				dispatchEvent(new TwitterEvents(TwitterEvents.PARSER_COMPLETO));
			}
		}

		private function IOError(e:Event):void
		{
			trace("IO Error!");
		}
		private function SError(e:Event):void
		{
			trace("Security Error!");
		}
		/**
		 * Dispara um evento ao completar o recebimento
		 * @param	e:TwitterEvents
		 */
		private function onComplete(e:TwitterEvents):void
		{
			dispatchEvent(new TwitterEvents(TwitterEvents.DADOS_RECEBIDOS));
		}
		/**
		 * Retorna os dados
		 */
		public function get dados():Array
		{
			return this.arrTweets;
		}
	}

}

TwitterEvents.as

• Uma classe de eventos personalizada que informa quando os dados já estão completos (URLRequest) e quando o “parser” já foi finalizado.

/**
 * @author: Lucas Marçal
 * @version: 1.0
 * @email: inbox@lucasmarcal.com.br
 * @link: www.lucasmarcal.com.br/blog
 */
package lmcosta.twitter
{
	import flash.events.Event;

	public class TwitterEvents extends Event
	{
		public static const PARSER_COMPLETO:String = "PARSERCOMPLETO";
		public static const DADOS_RECEBIDOS:String = "RECEBEU";
		/**
		 *
		 * @param	tipo:String
		 * @param	bubbles:Boolean
		 * @param	cancel:Boolean
		 */
		public function TwitterEvents(tipo:String,bubbles:Boolean=false,cancel:Boolean=false)
		{
			super(tipo, bubbles, cancel);
		}
	}

}

Consome.as

• Responsável por criar uma instancia da classe GetTweets

/**
 * @author: Lucas Marçal
 * @version: 1.0
 * @email: inbox@lucasmarcal.com.br
 * @link: www.lucasmarcal.com.br/blog
 */
package lmcosta.twitter
{
	import flash.display.MovieClip;
	import lmcosta.twitter.GetTweets
	import lmcosta.twitter.TwitterEvents

	public class Consome extends MovieClip
	{
		public var resultTwitter:GetTweets

		public function Consome()
		{
			this.resultTwitter =  new GetTweets();
			this.resultTwitter.configTwitter("lmcosta", "", 1);
			this.resultTwitter.addEventListener(TwitterEvents.DADOS_RECEBIDOS, initLista);
		}
		/**
		 * Responsavel por criar a lista dos Tweets
		 * Aqui você pode distribuir os itens como
		 * achar melhor.
		 * @param	e
		 */
		private function initLista(e:TwitterEvents):void
		{
			trace("Pronto para iniciar lista: ");
			trace(this.resultTwitter.dados);
		}
	}

}

Bom, não era novidade que o AIR já permitia comunicação por sockets, mas a verdadeira novidade na versão 2.0 é que agora permite escutar também uma porta da nossa maquina para comunicações… Mas em que se traduz isto na realidade?? Fácil! A partir de agora podemos criar os nossos pequenos/médios servidores socket, que com algum trabalho até podemos criar um servidor web… claro que é um exagero, mas abre um mundo novo de possibilidades….

Então, a partir de agora as nossas aplicações passam também a poder ser servidores, quer de comunicação de dados ou até mesmo armazenamento… imaginem, podemos criar uma base de dados na nossa maquina, usando SQLLite, e expor os seus dados ao exterior usando funções locais isto através de uma qualquer porta…

Isto não era qualquer novidade nos aplicativos desktop, mas trazendo esta nova funcionalidade os aplicativos AIR passam a poder ser usados para qualquer comunicação de dados permitindo mesmo que duas aplicações AIR em diferentes maquinas possam comunicar entre si sem qualquer necessidade de aplicações/bases de dados/back-ends terceiros… claro que teriam que ter conhecimento do ip de cada uma das maquinas, mas isso com um IP fixo resolve-se rapidamente.

Decidi explorar esta nova funcionalidade, e a primeira prova de fogo foi logo para um projecto de um cliente, que consistia no desenvolvimento de um servidor que recebe-se dados de vários dispositivos através de uma porta, que grava-se esses dados numa base de dados e que envia-se uma resposta a cada dispositivo, dependendo do tipo de dados… Os dispositivos podem ser apenas 2 como 50, pelo que era uma verdadeira prova de fogo para o AIR e sua atípica gestão de memória já que o sistema receberia algumas dezenas de pedidos por minuto. Depois de dar uma vista de olhos às classes socket, percebi que era muito mais fácil  do que eu imaginava, o servidor foi feito com recurso a cerca de 50 linhas de código, tudo ficou a funcionar…. restava o teste em tempo real com os tais dispositivos….

Inicialmente apenas com 2 demonstrou ser rápido e eficaz, mas e com 20/30 dispositivos a enviar dados… foi entregue o projecto ao cliente para testes, depois de 1 semana e de mais de 40.000 ligações (apenas entradas, se contar as saídas serão 80.000) os gasto0s de memória mantiveram-se entre os 20 e 50 mb não ultrapassando este valor, e o sistema não encontrou qualquer falha, erro ou situações desconhecidas… Resumindo, sem muito tempo gasto, o AIR passou a ser o substituto de um sistema existente feito em delphi, e mantêm-se a correr quase à 2 meses 24/24h sem qualquer problema….

Os meus parabéns à adobe que realmente fez um excelente trabalho!! Agora segue a dica, como criar um servidor socket? facil… o mais complicado talvez seja instalar o SDK 2 beta para desenvolvimento, mas isso vocês descobrem facilmente nas release notes…

Segue então uma explicação de como fazer o seu servidor socket em menos de 5 minutos…(…)
Leia o resto de Air 2.0 Beta, Servidor socket em 5 minutos! (200 palavras)

© Mário Santos em TSW – That Should Work, 2010. |
Link Permanente |
Um comentario |
Adicionar ao
del.icio.us -
Stumble it -
Google Bookmark -
technorati


Mais artigos relacionados nas categorias: Air, air 2.0 beta, as3, Beta, server, servidor, socket

Em continuação a série de tutoriais sobre AS3…

Hoje vou falar pouco sobre novidades, mas vou apenas apresentar um exemplo pratico de como criar um painel personalizado usando apenas action script  3 e todos os conceitos que aprendemos até agora…

5.4. Classes, Exemplo Painel personalizado

Vamos a um exemplo prático, usando o flex o meu objectivo é fazer o seguinte:

Criar um painel personalizado que permita:

–    ser arrastado (drag & drop) na nossa aplicação
–    ter botões de maximizar, minimizar e restaurar
–    Adicionar efeitos de maximizar, minimizar e restaurar.

Vamos aplicar todos os conhecimentos adquiridos anteriormente bem como a utilização de algumas classes nativas de efeitos disponiveis no flex como efeitos que mais à frente falaremos. Este exemplo apenas funcionará no Flex, visto que o AS3 do flash ainda não suporta alguns pontos e classes de efeitos que foram adicionadas no Flex.

Vejam o seguinte código que foi devidamente comentado para perceberem facilmente toda a sua estrutura.(…)
Leia o resto de Tutorial Action Script 3 – 015 (2,458 palavras)

© Mário Santos em TSW – That Should Work, 2010. |
Link Permanente |
2 comentarios |
Adicionar ao
del.icio.us -
Stumble it -
Google Bookmark -
technorati


Mais artigos relacionados nas categorias: as3, custom, Flex, painel, Tutorial, window

Salve pessoal
Decidi escrever alguns artigos para esse final de ano, tem muita coisa que está para ser publicado aqui no blog, porém ainda estou editando os vídeos e arquivos.
Visando não deixar esse blog desatualizado por muito tempo eu decidi indicar alguns links para que você já vá se acostumando com a forma como faremos as coisas aqui no blog em 2010, estou falando de programação orientada a objeto o famoso OOP.

Eu até pensei em criar artigos sobre esse assunto mas em uma busca na web acabei encontrando uma material de valor incalculável feito pelo Michel Araujo (@michel_ssa) então vou apenas indicar que todos vocês assistam á esses vídeos do Michel falando sobre OOP, abaixo seguem os links:

Programação Orientada à Objeto com AS3: Introdução e Conceitos
Programação Orientada à Objeto com AS3: Pacotes
Programação Orientada à Objeto com AS3: Classes
Programação Orientada à Objeto com AS3: Encapsulamento
Programação Orientada a Objeto com AS3: Herança e Polimorfismo

Novamente gostaria de dar os parabéns ao Michel realmente esse material é de ótima qualidade e sem dúvida pode ajudar muito desenvolvedores de Actionscript 3.0.