04 fev 10 Tutorial Flex: Criando um Popup semelhante a um balão no Flex 3

Olá pessoal, o objetivo deste post é explicar como criar um popup em forma de um balão.

Bom, vamos lá:

O primeiro passo é criar nosso component responsável por ser nosso “ballon”, nele nós teremos que criar a ponta do balão e colocar um efeito de sombra para dar uma melhor visualização do ballon na pagina.

package com.wladistonpaiva.components
{
	import flash.filters.DropShadowFilter;

	import mx.containers.Box;

	/**
	 * Classe do component
	 */
	public class Ballon extends Box
	{
		[Bindable]
		public var shadow:DropShadowFilter;

		public var triangleHeight:int=17;
		public var triangleInit:int=30;
		public var marginPoint:int=0;

		/**
		 * Construtor
		 */
		public function Ballon()
		{
			super();

			// cria a sombra
			shadow=new DropShadowFilter();
			shadow.blurX=8;
			shadow.blurY=8;
			shadow.distance=4;
			shadow.alpha=.7;
			shadow.color=0x000000;

			// array de efeitos
			var arr:Array=new Array();
			arr.push(shadow);
			// adiciona o efeito
			this.filters=arr;
		}

		/**
		 * Método chamado quando objeto é criado.
		 * Serve para criar o objeto com o titulo
		 */
		override protected function createChildren():void
		{
			super.createChildren();

			// desenha o balao
			graphics.beginFill(0xFFFFFF);
			graphics.lineStyle(1, 0xcacaca);
			graphics.drawRoundRect(0, 0, this.width, this.height, 15, 15);

			graphics.moveTo(marginPoint, triangleInit);
			graphics.lineTo(-triangleHeight, triangleInit);
			graphics.lineTo(marginPoint, triangleInit + triangleHeight);

			graphics.lineStyle(1, 0xFFFFFF);

			this.y-=triangleInit;
			this.x+=triangleHeight;
		}
	}
}

O construtor da classe cria e define a sombra para o balão, e assim que o objeto é exibido na tela é chamado o método createChildren. Ele então desenha um retangulo com as bordas arredondadas e a ponta do balão.

Em seguida basta instanciar o componente e adicionar ele na aplicação.

E no final das contas sairá algo semelhante a isso:

Para ver o código basta clicar com o botao direito e ir em ‘view source’.

Abraços Pessoal! Aguardem que postarei mais tutoriais, e com o tempo eu vou ficando melhor na explicação.

Tags: Componente, Flex, Tutorial