Francisco Prado » tutorial

Usando jQuery para manipular arquivos SVG

Francisco — Fri, 28 May 2010 14:31:18 +0000

Em uma postagem anterior falei da biblioteca Raphaël para criação de gráficos vetoriais SVG usando Javascript. Agora nesta postagem, demonstrarei como usar a popular biblioteca jQuery para manipular arquivos SVG, usando um plugin.

Utilizar este plugin, em detrimento de uma biblioteca mais específica, pode ser útil quando se está habituado a usar jQuery. No site oficial do projeto jQuery SVG você encontra diversos exemplos úteis.

Existe a documentação da biblioteca, no site, onde você encontra, bem organizadamente, métodos e atributos para utilizar a biblioteca.

Experimentei um pouco a biblioteca. Para testes, você deve baixar os arquivos Javascript específicos e direcionar corretamente a localização nas pastas de acordo com o seu computador. A seguir, um exemplo, em que baixei do site e modifiquei, adicionando um retângulo que responde aos cliques do mouse (repare nos parâmetros – entre chaves – a chamada do método alert).

jQuery SVG - o Básico

jQuery SVG - O Básico

Página de exemplo

Usando SVG através do ActionScript – AS3 SVG Renderer

Francisco — Sun, 09 May 2010 12:40:46 +0000

É possível carregar arquivos gráficos SVG (formato de arquivos de desenho em vetor, organizados em modo XML) através do ActionScript como se fossem Sprites.

A biblioteca AS3 SVG Renderer suporta boa parte dos recursos oferecidos pela linguagem SVG. Criada por um brasileiro (veja o blog), ela ainda não suporta o carregamento de arquivos de imagem (como JPEG, PNG, etc., um recurso disponível no SVG), o que não chega a atrapalhar em nada (haja vista que é possível carregar Bitmaps usando classes nativas do ActionScript). Muitos outros recursos estão disponíveis (desenhos de formas, linhas, transformações como rotação e inclinação, entre outros).

O uso da biblioteca é muito simples: basta carregar o arquivo como se fosse um XML, usando o package do ActionScript. O programa Adobe Flash torna-se dispensável.

O exemplo a seguir carrega e exibe um SVG carregado a partir de uma URL qualquer.

package
{
	import flash.display.MovieClip;
	import flash.display.Sprite;

	// A biblioteca AS3 SVG RENDERER
	import com.lorentz.SVG.*;

	import flash.events.Event;

	import flash.net.URLLoader;
	import flash.net.URLRequest;

	/**
	 * ...
	 * @author FRANCISCO PRADO
	 */
	public class Main extends Sprite
	{
		public var mc:MovieClip = new MovieClip();

		public function Main() {
			// Carregador da figura
			var loader:URLLoader = new URLLoader();
			loader.addEventListener(Event.COMPLETE, onComplete);

			// Iniciando o carregamento
			loader.load(new URLRequest("URL do arquivo.svg"));

			addChild(mc);
		}

		public function onComplete(evt:Event):void {
			var shp:Sprite;
			var svg:XML = new XML(evt.target.data);

			// Renderizará o arquivo SVG
			shp = new SVGRenderer(svg);

			// Adiciona ao movieclip
			mc.addChild(shp);
		}
	}
}

Mais sobre ActionScript 3.0 – programas, bibliotecas e dicas

Francisco — Sat, 10 Apr 2010 13:23:35 +0000

Para reanimar um pouco este blog vou postar aqui algumas dicas de programas e de bibliotecas para quem programa/quer programar com ActionScript 3.0.

Programas

FlashDevelop – não conheço todas as IDEs para ActionScript, mas acredito que esta seja uma das melhores – senão a melhor. Ela automaticamente importa os packages de classes que você instancia, seu auto-complete é poderosíssimo, além de ser leve e permitir a compilação usando o Flex SDK (para configurar isso veja este tutorial).

Funciona em Windows (não sei se há versão para Mac, e não acredito que rode/possa rodar em Linux, uma vez que ele foi criado sobre o Microsoft .NET Framework – tentei emular e não deu certo).

Ambientes de Desenvolvimento para ActionScript – aqui segue uma lista com outros programas (e seus links) para programar em ActionScript.

Flex SDK – necessário ter caso queira compilar seus programas via FlashDevelop, entre outros. É opensource.

Tutoriais

Wikilivro em português – wikilivro sobre AS 3.0 hospedado no Wikilivros (da Wikipédia).

Tutorial do Mário Santos (em PDF) – parte 1 e parte 2 – talvez os mais populares tutoriais sobre AS 3.0 em português (de Portugal) da Web.

Bibliotecas

Você pode ver uma postagem minha antiga sobre algumas bibliotecas. Há sobre bibliotecas 3D apenas. Aqui vou indicar mais algumas bibliotecas que talvez não sejam tão conhecidas.

AS3ISOlib – biblioteca para geração de gráficos isométricos. A biblioteca é bem fácil de se usar e bem interessante. Ela foi feita para ser usada com o Adobe Flash apenas. Porém, mudando algumas propriedades de umas classes consegui fazer ela ser usada com o FlashDevelop (em outras palavras, mudei os objetos Vector, disponíveis apenas nos Adobe Flash CSx para Array, fácil. ).

JigLibFlash – engine para simulação de física em 3D. Ela é ligada para fazer simulação usando em conjunto a biblioteca Papervision 3D, estritamente – mas há “plugins” para se utilizá-la em conjunto com Away3D, Sandy3D e outras.

O problema dela é esse: você não pode usá-la livremente (sem estar em conjunto com uma biblioteca 3D – você tem que estar atrelado a uma…). Os autores escreveram no blog deles que ainda pretendem mudar a arquitetura da biblioteca a fim de torná-la utilizável por qualquer outro modo – o que é uma boa notícia.

WOW 3D – outra engine de física em 3D. É baseada na APE, uma outra engine porém 2D. Esta aqui usa em conjunto a biblioteca Sandy3D para geração de gráficos 3D, apenas.

XML e Texto no ActionScript 3.0 – Tutoriais

Francisco — Sun, 31 Jan 2010 11:24:51 +0000

Segue as dicas dos artigos (90% completos) sobre uso de campos de texto no AS 3.0 e uso de XML.

Estou sem postagem séria no momento e não rascunhei nada. Mas esses artigos, ainda a serem completados, já contêm bastante coteúdo.

O artigo sobre campos de texto já tem quase tudo a respeito sobre o assunto, com exceção ao uso de formatação com HTML e CSS (a ser inserido).

O sobre XML, mais completo, ainda não tem conteúdo a respeito da remoção e inserção de elementos e envio de dados. De todo resto, está completo.

O endereço do wikilivro é este aqui: http://pt.wikibooks.org/wiki/ActionScript

Baleiando não!

Francisco — Wed, 20 Jan 2010 12:10:37 +0000

Devido ao fato de estar muito ocupado com outras coisas (jobs, etc) o wikilivro ficou sem acréscimos nas últimas semanas.

Mas há um artigo destinado ao uso de campos de texto (campos de senhas, input etc.) inserido (e incompleto ainda) lá.

Há outros artigos que tiveram pequenos acréscimos, dêem uma olhada lá. Até a próxima.

Rápidas sobre ActionScript 3.0

Francisco — Mon, 11 Jan 2010 13:07:04 +0000

Mais um post da série dedicada à linguagem ActionScript (versão 3). Garimpando rapidamente no Google, sites e blogs por estes dias, selecionei alguns links sobre o assunto. São posts e sites dedicados à bibliotecas, dicas, tutoriais… Abaixo, os links com comentários.

ActionScript CheatSheet: parece ser muito bom: reúne várias cheatsheets (listas/dicionários com dicas de comandos e propriedades) sobre ActionScript, Papervision 3D (biblioteca para geração de 3D), AIR e outros. A seção de downloads das folhas está aqui. Dica: baixem o segundo PDF, tem várias funções relativas à datas, arrays, tipos de erros, etc.
30 grandes bibliotecas para AS 3: postagem reunindo links para várias bibliotecas de código aberto, de gêneros variados: física, desenvolvimento de games, 3D… Recomendo uma visita.
Bibliotecas de física para AS 3: postagem que cita diferenças entre as bibliotecas disponíveis para simulação de física.
Flash 3D – Edutech (em inglês): artigo numa wiki em que reúne comentários e links a respeito de vários tipos de bibliotecas para uso de física e 3D em Flash/ActionScript.
Sandy 3D: eu sei, existe a Papervision3D para geração de gráficos 3D com AS e é muito mais popular. No entanto, esta biblioteca parece ser muito interessante, pois eles disponibilizam tutoriais muito bons (em inglês) e passo-a-passo (procuro material organizado sobre Papervision3D na web e não encontro). Ainda não experimentei, mas fica a dica.
Away3D: outra biblioteca 3D. Tem tutoriais e uma wiki a respeito. Conheço nada do projeto mas como deve haver entusiastas deixo o link aqui.
Tutorial do Mário Santos (em PDF) – parte 1 e parte 2: uma apostila bem rica e interessante. Em português de Portugal. Aliás, nosso amigo lusitano mantém um blog a respeito da linha Adobe (Flex, Flash etc). Ele também posta tutoriais sobre AS, porém mais dirigido à plataforma Flex. Li a parte 1 e recomendo.
Blog do Erick Souza: blog do ituano Erick Souza, com ênfase em Flash. Tutoriais, dicas e notícias.

E claro, o Wikilivro de AS 3. É o wikilivro sobre AS hospedado no Wikibooks em português. Como estou revisando a linguagem (estudei ela há um bom tempo) vou inserindo as informações nele. Já há bastantes tópicos. A galera tem gostado e tudo, mas seria interessante que, se possível, colaborasse, mesmo com simples revisões/testes ou acréscimos.

A ideia por trás do livro em formato wiki é que qualquer um pode colaborar e acrescentar, o que pode gerar um livro em constante expansão e atualização, além de gratuito, para temas como este (linguagens de programação).

O wikilivro é promissor? Talvez. Pelo jeito vai ter um único colaborador: eu ! Mas é esperar para ver. Afinal só existe há cerca de 20 dias…

Caso tenha links para sugerir, insira nos comentários, que atualizarei a postagem.

Mais tutoriais – ActionScript 3.0

Francisco — Thu, 07 Jan 2010 19:58:10 +0000

Continuando a série de tutoriais sobre ActionScript 3.0. Foram adicionais mais capítulos ao livro / apostila, que são estes:

Lista de exibição:

Eventos:

Propagação de evento

Desenhando com vetores:

A relação completa de tutoriais está no índice do wikilivro, ou no post anterior.

Lembrando que muitos tópicos ainda serão enxugados, sendo removidos ou abreviados. Em breve mais capítulos.

Tutoriais de ActionScript 3.0

Francisco — Sat, 02 Jan 2010 17:03:25 +0000

O livro/apostila/tutorial (ou melhor, Wikilivro) de ActionScript 3.0 já tem um pouco mais de dez dias de criação e já conta com uma boa série de artigos.

Aqui vai a lista de alguns deles que já contam com uma boa resolução. Prefácio:

Começando na linguagem:

Propriedades e eventos:

Propriedades
Eventos (90%)

Orientação a objetos:

E é isso aí por enquanto. Em caso de erros nos links, reportar no comentários. A ideia de hospedar o livro no Wikilivro tem uma razão óbvia: a intenção é ser um trabalho coletivo. Desta maneira o wikilivro estará em constante mutação e evolução.

Se encontrar erros nos textos ou desejar acrescentar conteúdo ao wikilivro, será de grande valia. A ideia de criar esse tutorial é de que há muito pouco material sobre ActionScript em português. Tanto em livros e apostilas como em sites. Há muitos tutoriais espalhados pela web, mas são dicas curtas, posts de blogs, que são muitos diferentes e isolados. As apostilas sobre AS, se comparadas com as que existem para JavaScript, PHP e etc., são muito resumidas.

Quando houver uma quantidade interessante, o wikilivro poderá ser baixado em PDF. Por enquanto, é isso, até a próxima!