Esse componente auxilia a todas aplicações que acabam sendo utilizadas em projetores ou que, precisam destacar algum componente para fixar a atenção do usuário sobre o que está sendo exibido. Apesar de ser um componente simples e de não permitir ações nos componentes em destaque, traz um ganho muito grande a aplicação. Vejam o exemplo abaixo:

[kml_flashembed movie=”https://www.redspark.io/wp-content/uploads/Destaque.swf” width=”540″ height=”300″ fversion=”10″/]

Agora vou ensinar como utilizar o componente no seu projeto.

1. Primeiro, devemos baixar aqui a biblioteca que contém o componente, e adicioná-la na pasta libs do seu projeto.

2. Agora precisamos incluir a classe principal do componente no Application do nosso projeto Flex.







3. Devemos extender os objetos que desejamos destacar e implementar a interface br.com..components.zoom.IZoomItem, no meu exemplo, eu extendi a classe Panel que ficou assim.

package
{
/**
* @author Bruno Sales
* Created: 28/02/2011
*/
import br.com..components.zoom.IZoomItem;

import spark.components.Panel;

public class PanelZoom extends Panel implements IZoomItem
{
public function PanelZoom()
{
super();
}

public function useBackgroundZoomContainer():Boolean
{
return false;
}
}
}


4. Observe o método useBackgroundZoomContainer():Boolean da interface IZoomItem, ele serve para auxiliar quando estamos tentando destacar um componente com fundo transparente, como no caso apresentado o meu Panel não tem um background transparente, então eu retorno false no método.

5. Aplicar a minha nova classe PanelZoom ao meu Application.







6. Executar o projeto e clicar no novo painel segurando o SHIFT para testar o efeito.

Agora já podem abusar do componente e extender qualquer tipo de componente visual. Espero que tenham gostado!