Tutorial HypeFramework – Joshua Davis

Um dos palestrantes do FlashCamp Rio é o Joshua Davis Designer conhecido mundialmente por elaborar trabalhos gráficos que utilizam códigos. Alguns trabalhos realizados pelo Joshua Davis Abaixo:

A base de técnica o Joshua Davis disponibilizou em seu framework o Hypeframework : http://www.hypeframework.org/, um framework com uma série de funcionalidades que ajudam no desenvolvimento de gráficos e animações complexas.

Então nesse post vamos fazer um pequeno tutorial para utilizar algumas classes legais do Hype framework. Inicialmente vamos baixar o zip com o pacote de classes :

http://github.com/downloads/hype/hype/HYPE_1_1_8.zip

Dentro do zip do link acima em uma série de exemplos utilizando as principais classes do Hype, tanto em AS puro como utilizando o Flash IDE. Para esse tutorial vou utilizar as3 puro com o Flash Develop + Flex SDK se você não sabe usar essa parceria open source da uma olhada nesse post:

https://www.fellyph.com.br/blog/tutoriais/flash-develop-flex-sdk/

As versões mais recentes do Flash Develop já vem uma opção de intergrar o FLEX SDK na instalação. Se tudo estiver pronto vamos ao Primeiro exemplo vou utilizar o gridLayout classe utilizada para montar layouts em grid, seu funcionamento é bastante simples. Quando inicializamos uma classe passamos os seguintes paramêtros:

new GridLayout(posição inicial x, posção inicial y, espaçamento x, espaçamento y, número de colunas )

Agora vamos para um exemplo prático criei duas classes com o nome Bola e outra Grid :

package
{
	import flash.display.Sprite;

	public class Bola extends Sprite
	{
		public function Bola()
		{
			graphics.beginFill(0xFFFFFF*Math.random());
			graphics.drawCircle(0,0,15);
			graphics.endFill();
		}
	}
}

A classe Bola é uma classe simples que como o nome sugere cria uma circulo de 15px. Abaixo vou mostrar o código da classe Grid que para aplicar os elementos no palco usando a classe GridLayout. Já vou postar o código comentado:

package
{
	import flash.display.Sprite;

	import hype.extended.layout.GridLayout;

	public class Grid extends Sprite
	{
		// criei uma variável para controlar linhas e colunas
		public var linhas 	:Number = 8;
		public var colunas 	:Number = 12;
		//criei meu GridLayout
		public var layout	:GridLayout;
		public var total	:Number;

		public function Grid()
		{
			init()
		}

		public function init():void{
			//defini o número total de elementos de acordo com
			//o número de linhas e colunas

			total = linhas * colunas;
			//inicializando o gridLayout
			//passamos como parâmetro :
			//(a posição inicial x, a posição inicial y, espaçamento x , espaçamento y , número de colunas)
			layout = new GridLayout(50,50,40,40,colunas);

			//vou executar o for de acordo com o total de elementos
			for(var i:int; i < total;i++){
				var item:Bola = new Bola();
				//aplicando o gridLayout nos elementos inicializados
				layout.applyLayout(item);
				addChild(item);
			}
		}

	}
}

O Funcionamento é básico:

1 – Criar uma GridLayout
2 – Definir os parâmetros do Grid
3 – Aplicar o GridLayou a cada elemento para fazer o posicionamento;

E o resultado que temos é o seguinte:

[flash https://www.fellyph.com.br/blog/wp-content/uploads/2010/12/Grid.swf w=550 h=400 mode=1]

Outra classe interessante do HypeFramework é o SimpleProximity ela faz uma interação com uma propriedade de elemento de acordo com a proximidade ao seu raio, que propriedade vai ter interação e a largura do definido na classe. Para entender melhor a classe vamos a um exemplo prático: Vou criar uma classe Proximidade vou usar a base da classe Grid vai mudar apenas poucas linhas em relação a classe anterior.

Segue o código abaixo :

package
{
	import flash.display.Sprite;
	
	import hype.extended.behavior.SimpleProximity;
	import hype.extended.layout.GridLayout;
	
	public class Proximidade extends Sprite
	{
		// criei uma variável para controlar linhas e colunas
		public var linhas 	:Number = 8;
		public var colunas 	:Number = 12;
		//criei meu GridLayout
		public var layout	:GridLayout;
		public var total	:Number;
		
				
		public function Proximidade()
		{
			init()	
		}
		
		public function init():void{
			//defini o número total de elementos de acordo com
			//o número de linhas e colunas
			
			total = linhas * colunas;
			//inicializando o gridLayout 
			//passamos como parâmetro :
			//(a posição inicial x, a posição inicial y, espaçamento x , espaçamento y , número de colunas) 
			layout = new GridLayout(50,50,40,40,colunas);
			
			//vou executar o for de acordo com o total de elementos 
			for(var i:int; i < total;i++){
				var item:Bola = new Bola();
				//aplicando o gridLayout nos elementos inicializados
				layout.applyLayout(item);
				
				//utilizando a Classe SimpleProximity
				var prox:SimpleProximity = new SimpleProximity(item, "scale", 0.8,0.4,1,1.8,150);
				// defini que ele vai trabalhar com a propriedade scale 
				//ela serve tanto para o scaleX como para o scaleY
				// defini em seguida que ele vai ter uma elasticidade 0.8 e um ease 0.4
				// depois definir os valor minimo e o maximo 
				//e por fim o raio para interação
				
				//dando o start no prox para ficar acompanhando a posição d
				//do mouse em relação ao item				
				prox.start();
				
				addChild(item);
			}	
		}
		
	}
}

O código acima já foi comentado e o resultado é o seguinte :

[flash https://www.fellyph.com.br/blog/wp-content/uploads/2010/12/Proximidade.swf w=550 h=400 mode=1]

Podemos usar essas duas classes para fazer uma menu parecido com o menu inferior do Mac, agora dessa vez vamos montar apenas uma linha, vamos criar agora uma classe com o nome Menu e Fazer algumas modificações na classe Bola como podemos conferir abaixo:

package
{
	import flash.display.Sprite;
	
	public class Bola extends Sprite
	{
		public function Bola()
		{
			graphics.beginFill(0xFFFFFF*Math.random());
			//muda o ponto y para o "registration" ficar no canto inferior
			// ao centro
			graphics.drawCircle(0,-10,12);
			graphics.endFill();
		}
	}
}

Agora a classe Menu:

package
{
	import flash.display.MovieClip;
	
	import hype.extended.behavior.SimpleProximity;
	import hype.extended.layout.GridLayout;
	
	public class Menu extends MovieClip
	{
		public var colunas 	:Number = 10;
		public var layout	:GridLayout;
		
		public function Menu()
		{
			init()
		}
		
		public function init():void{
			// vou usar o espaçamento x 50 
			//e o espaçamento y vou aplicar no meio do stage
			layout = new GridLayout(50,stage.stageHeight/2,50,40,colunas);
			
			//vamos usar o número de colunas para limitar o for
			//assim  ter apenas uma linha
			for(var i:int; i < colunas; i++){
				var item:Bola = new Bola();
				layout.applyLayout(item);
				var prox:SimpleProximity = new SimpleProximity(item, "scale", 0.6,0.4,1,1.9,100);
				prox.start();
				addChild(item);
			}
		}
	}
}

E o resultado é o seguinte :
[flash https://www.fellyph.com.br/blog/wp-content/uploads/2010/12/menu.swf w=550 h=400 mode=1]

Como podemos ver algumas classes se olharmos com cuidados podemos encontrar soluções simples para o nosso dia-a-dia. Mostrei essas duas classes que fazem parte de um conjunto de 18 classes, tem muita coisa legal a ser explorada no Hype posso dizer que o Joshua Davis é um cara muito foda. Vou tentar escrever mais posts sobre o Hype. Mas hoje vou encerrando esse tutorial por aqui.

2 respostas para “Tutorial HypeFramework – Joshua Davis”

  1. linhas 195 e 268 erro 1119: Access of possibly undefined property EXIT_FRAME through a reference with static type Class.

    post antigo ja, mas estava procurando uns tutoriais na internet e encontrei esse aqui, mas nao consigo fazer funcionar, da esses erros. Vo utulizou o HYPE_1_1_8.zip mas no site nao tem mais, somente o HYPE_1_1_9.zip, teria como disponibilizar para baixar o HYPE_1_1_8.zip.

Deixe uma resposta

This site uses Akismet to reduce spam. Learn how your comment data is processed.