[Resolvido] Preloader redondo

[WGMS 0]

Sabem aqueles preloaders redondos que ficam girando para carregar imagens (por exemplo)? Estou procurando um tutorial de como fazer, mas não encontro de jeito nenhum

Ele é bem simples, só fica girando, não tem barra de progresso nem porcentagem

 

Alguém poderia me indicar ou me responder como que faz?

 

Valeu, abraços

[Jerfs 1]

Sabem aqueles preloaders redondos que ficam girando para carregar imagens (por exemplo)? Estou procurando um tutorial de como fazer, mas não encontro de jeito nenhum

Ele é bem simples, só fica girando, não tem barra de progresso nem porcentagem

 

Alguém poderia me indicar ou me responder como que faz?

 

Valeu, abraços

 

Eae beleza!?

 

Cara se não quer contador de porcentagem e nenhum outro tipo de controle, é só fazer um movieClip e deixá-lo rodando enquanto o preloader carrega...

 

simples!

[Elektra 102]

Oi VGMS, legal que consegui se achar com o Flash CS3.

 

Eu já tive pane com alguns CS4 portable por conta do SO que uso, no XP dos meus colegas ia beleza, mas eu uso Vista Ultimate com hardware de sobra, mesmo assim congelava algumas ferramentas. Mistérios, que fazer.

 

Bom, vamos ver agora o seu preloader com movie clip.

Eu uso AS3, vou deixar para você o código que uso:

 

stop();

this.addEventListener(Event.ENTER_FRAME, loaded);

function loaded(EVENT:Event):void{
	var carregando:Number=int(loaderInfo.bytesLoaded/loaderInfo.bytesTotal*100)
	
	if(carregando==100)
	{
		removeEventListener(Event.ENTER_FRAME, loaded);
		gotoAndPlay(2);
	}
}

Quanto ao movie clip, algum sites oferecem geradores no formato gif, mas o melhor mesmo é criar um uma animação frame a frame no Flash, ou vetorizar o gif (Modify > Bitmap > Trace Bitmap).

 

Se quiser, aqui tem 2 opções de geradores, na home clique em Pessoal > Meus Favoritos > Utilitários Web --> pág 3 - Gerador de animação para tela de carregamento. Clique aqui

 

Se usar outra versão de action, por favor informe, outros colegas poderão ajudar.

 

Abraços.

[WGMS 0]

Jerfs, desculpe, mas não compreendi, você fala de um movie clip sem actionscript?

 

Elektra, muuito obrigado pela sua resposta, já tive uma idéia de como funciona, porém, não uso AS3 ainda, estou tentando aprender o básico do AS2 para aprender AS3 melhor, mas você entendeu exatamente o que eu quero, e obrigado pelos preloader's em gif, já salvei nos meus favoritos, mas eu realmente prefiro fazer totalmente em flash

 

Obrigado a todos

[Michel Araújo 0]

EDIT: Enviei a resposta antes de ver que ele deseja em AS2, mas de toda forma, fica a classe aí =)

 

Criei uma classe, com fins didáticos, para criar um video-tutorial. O video ainda não está pronto, mas a classe sim, se você tiver um pouco de conhecimento em AS3 e Orientação à Objeto, dá pra usar. Infelizmente, como a fiz pra criar um tutorial em video, não me preocupei muito em comentar, ou com ASDoc.

 

As vantagens sobre criar a animação 'manualmente' na ferramenta do flash são o tamanho final do arquivo, e a flexibilidade da animação, já que com a classe você pode mudar facilmente cor, tamanho, numero de elementos, etc...

 

package br.com.michelfernandes.efeitos
{
	
	import flash.display.*;
	import flash.utils.Timer;
	import flash.events.TimerEvent;
	
	public class LoadingEffect extends Sprite
	{
		
		private var _loading:Sprite = new Sprite();
		
		private var _cor	:uint;
		private var _nElem	:uint;
		private var _vel	:uint;
		private var _raio	:uint;
		private var _tMax	:Number;
		private var _tMin	:Number;
		private var _larg	:Number;
		private var _timer	:Timer;
		
		public function LoadingEffect(pCor:uint 	= 0xFFCC00,		// Cor da Animação
						pNElem:uint 	= 8,			// Total de Elementos
						pVel:uint 	= 10, 			// Velocidade
						pRaio:uint 	= 10,			// Raio do Circulo
						pTMax:Number	= 10,			// Comprimento Maximo do Elemento
						pTMin:Number	= 5,			// Comprimento Minimo do Elemento
						pLarg:Number	= 4			// Largura do Elemento
						):void
		{
			_cor 	= pCor;
			_nElem	= pNElem;
			_vel 	= pVel
			_raio 	= pRaio;
			_tMax	= pTMax;
			_tMin	= pTMin;
			_larg	= pLarg;
			
			init();
		}
		
		private function init():void{
			if(_vel < 1) throw new Error('O valor da Velocidade não deve ser zero');
			if(_nElem < 2) throw new Error('O Numero de elementos da animação deve ser maior que um');
			
			_timer 	= new Timer(1000/_vel);
			criaLoader();
		}
		
		private function criaLoader()
		{
			for (var i:uint; i<_nElem; i++)
			{
				_loading.addChild(criaElemento(i));
			}
			
			_timer.start();
			_timer.addEventListener(TimerEvent.TIMER, gira);
			
			addChild(_loading);
		}
		
		private function gira(evt:TimerEvent)
		{
			_loading.rotation += 360 / _nElem;
		}
		
		private function criaElemento(i:uint):Shape
		{
			
			var _angulo	:Number = i * (2 * Math.PI / _nElem);
			var _tam	:Number = ((i / (_nElem - 1)) *  (_tMax - _tMin)) + _tMin;
			
			var elemento:Shape= new Shape();
			with(elemento)
			{
				graphics.beginFill(_cor);
				graphics.drawRoundRect(0, -(_larg/2), _tam, _larg, _larg);
				graphics.endFill();
				alpha = ((i / (_nElem - 1)) * 0.8) + 0.2;
				
				x 		+= (Math.cos(_angulo)*_raio);
				y 		+= (Math.sin(_angulo)*_raio);
				rotation= i * (360 / _nElem);
			}
			
                        return elemento;
		}
	}	
}

[Elektra 102]

Oi WGMS, eu também prefiro criar o mc no Flash mesmo, o gif não tem boa qualidade de imagem ao ser importado.

 

A única coisa legal de vetorizar o gif é aproveitar a posição dos shapes, ou converter alguma outra imagem em movimento, daí a sugestão.

 

Você não mencionou a versão do action, ofereci a que uso.

 

Quanto ao comentário do Jerfs, testei aqui o mc sem nenhum código, nunca tinha feito assim, mas ficou legal. Basta que você adicione o mc do preloader no frame 1 e a página no frame 2.

Obs: teste no PC.

 

Abraços

[WGMS 0]

Obrigado a todos pelas dicas, estou salvando os códigos AS3 para quando eu aprender, brigado mesmo

Porém não entendi como fazer o preloader sem códigos

Ele vai ficar girando até que a foto ou o site carreguem completamente?

Não vai ficar travando enquanto carrega?

Obrigado novamente

[Matheus Brito 12]

Obrigado a todos pelas dicas, estou salvando os códigos AS3 para quando eu aprender, brigado mesmo

Porém não entendi como fazer o preloader sem códigos

Ele vai ficar girando até que a foto ou o site carreguem completamente?

Não vai ficar travando enquanto carrega?

Obrigado novamente

 

Todos já responderam, mas ai vai mais uma vez, se você fizer um mc com uma animacao simples e claro que por tras você colocar o codigo pra chegar nos 100% ir pra algum lugar depois de carregado dai você tira o mc da tela tb.

Abs

[Elektra 102]

Caro amigo, sempre aprendi a criar preloaders com código, tanto faz que exiba porcentagem, barra de carregamento ou apenas um movie clip.

Testei a solução do Jerfs por curiosidade, mas penso que não seja adequada ao carregamento de um site.

 

Eu estou começando, mas posso lhe afirmar com segurança, o AS3 oferece mais possibilidades de controle do que deseja.

 

Aguardo o vídeo_tutorial do Michel pra aprender um pouco mais.

 

Sugiro aguarde o Jerfs para conferir a dica, se necessário me avise por mp, coloco um arquivo no server pra você baixar e dar uma olhada, ok.

 

Abraços

[Andre Cocuroci 0]

Desculpa upar o tópico, mas fiquei com essa dúvida, pq usar:

 

this.addEventListener(Event.ENTER_FRAME, loaded);

 

E não:

 

this.loaderInfo.addEventListener(Event.COMPLETE, completo);

this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, lendo);

 

 

 

Oi VGMS, legal que consegui se achar com o Flash CS3.

 

Eu já tive pane com alguns CS4 portable por conta do SO que uso, no XP dos meus colegas ia beleza, mas eu uso Vista Ultimate com hardware de sobra, mesmo assim congelava algumas ferramentas. Mistérios, que fazer.

 

Bom, vamos ver agora o seu preloader com movie clip.

Eu uso AS3, vou deixar para você o código que uso:

 

stop();

this.addEventListener(Event.ENTER_FRAME, loaded);

function loaded(EVENT:Event):void{
	var carregando:Number=int(loaderInfo.bytesLoaded/loaderInfo.bytesTotal*100)
	
	if(carregando==100)
	{
		removeEventListener(Event.ENTER_FRAME, loaded);
		gotoAndPlay(2);
	}
}

Quanto ao movie clip, algum sites oferecem geradores no formato gif, mas o melhor mesmo é criar um uma animação frame a frame no Flash, ou vetorizar o gif (Modify > Bitmap > Trace Bitmap).

 

Se quiser, aqui tem 2 opções de geradores, na home clique em Pessoal > Meus Favoritos > Utilitários Web --> pág 3 - Gerador de animação para tela de carregamento. Clique aqui

 

Se usar outra versão de action, por favor informe, outros colegas poderão ajudar.

 

Abraços.

 

[Eder Fortunato 15]

Andre Cocuroci

 

Acredito que seja apenas uma das formas de fazer,

 

o ideal seria com os eventos COMPLETE e PROGRESS mesmo

 

mas o resultado não seria diferente

 

 

 

[]´s

[Elektra 102]

Desculpa upar o tópico, mas fiquei com essa dúvida, pq usar:

 

this.addEventListener(Event.ENTER_FRAME, loaded);

 

E não:

 

this.loaderInfo.addEventListener(Event.COMPLETE, completo);

this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, lendo);

 

 

Oi Andre, o preloader que informei é básico, recebi durante um curso.

 

Naturalmente, conforme o tipo de arquivo, outras soluções são mais recomendáveis.

 

Vou ficar atenta a recomendação do Eder, que domina o assunto.

 

Abraços.

[Jerfs 1]

Olá WGMS, voltei depois de um tempo em férias, ou melhor, ainda estou de férias, mas senti falta do fórum e estou aqui. Bom, vamos lá... deixa eu tentar entender melhor o que quer. Você quer um movieClip rodando enquanto carrega o swf correto!? se a resposta for sim, é simples.

 

Eu faria da seguinte forma, utilizaria 2 frames, no primeiro estaria somente o movieClip e nada mais, e no segundo estaria o meu site ou animação o que quer que seja. no primeiro frame, além do seu movieClip, coloque a seguinte action:

 

stop();
createEmptyMovieClip('actionLoad', 0);
actionLoad.onEnterFrame = function() {
	total = getBytesTotal();
	carregando = getBytesLoaded();
	if (carregando == total) {
		nextFrame();
		removeMovieClip(actionLoad);
	}
};

 

pronto, isso fará com que o filme permaneça no primeiro frame até que seja todo ele carregado... tenta ae depois me diz se deu certo ok!?

 

Grande abraço.

[Andre Cocuroci 0]

Entendi, achei que tinha diferença. Estou usando esses eventos, mas tenho problemas com eles conforme esse tópico: Problema com Preload

 

Andre Cocuroci

 

Acredito que seja apenas uma das formas de fazer,

 

o ideal seria com os eventos COMPLETE e PROGRESS mesmo

 

mas o resultado não seria diferente

 

 

 

[]´s

 

[WGMS 0]

Opa Galera, valeu pelas respostas, quando der um tempinho vou testar, ando meio sem tempo, hehehe

 

Obrigado a todos

 

Abraços

[Elektra 102]

Só não demora muito, senão até lá já saiu o AS4, rsrsrs.

 

Brincadeira.

 

Abraços

[WGMS 0]

Opaa, acabei demorando mesmo xD

Já saiu o AS4? hehehe

 

Brigadão viu galera, consegui com o código do Jerfs

 

Obrigado a todos

 

Abraços

[Jerfs 1]

Show... precisando posta ae!

 

Abs