Você está aqui: Principal » Lista Completa de Tutoriais

Sobre este Tutorial

Autor:	Carlos Vitor de Castro Silva
Data:	25-01-2007
Categoria:	Web Design
Assunto:	FLASH - BÁSICO
Visitas:

Mouse trails no Flash

Vamos ver neste tutorial como personalizar o cursor do mouse, para criar um trabalho mais original e também veremos como criar um mouse trail.

Abaixo a lista dos tipos de personalização de mouse que usaremos

1. Personalizando o cursor do mouse

2. Criando um mouse trail com texto

3. Criando um mouse trail com efeito de atenuação (elástico)

4. Mouse trail com vários objetos seguindo o mouse e se juntando no final

5. Mouse trail com objetos em Alpha

Personalizando o cursor do mouse

1. Crie um novo arquivo no Flash com 400 pixels de largura e 250 pixels de altura.

2. Clique no Insert/New Symbol, escolha Movie clip e dê o nome de “cursor”.

3. Desenhe uma seta personalizada ou qualquer coisa que você queira que funcione como ponteiro do mouse, não esqueça que isto será o seu cursor de mouse então você não deve fazer um desenho muito grande para que o cursor não seja maior que o site.

4. Já que é para enfeitar, não vamos apenas modificar a aparência do cursor, mas também iremos animá-lo, para isso converta a forma que você acabou de desenhar em Símbolo gráfico.

5. Clique no quadro 10 da linha de tempo e pressione F6.

6. Dê um clique em cima da seta que você desenhou e use a paleta Properties para alterar a cor do símbolo, como mostrado abaixo.

7. Aplique uma Tween Motion entre o quadro 1 e o quadro 10 da linha de tempo.

8. Retorne a Scene 1 e arraste o clipe de filme recém criado para o palco, dê o nome de “cursor” à instância.

9. Dê um clique no movie clip para selecioná-lo e insira a action abaixo.

onClipEvent (enterFrame)

{

Mouse.hide( );

_x += (_parent._xmouse-_x);

_y += (_parent._ymouse-_y);

}

10. Está pronto pressione CTRL+ENTER para testar.

11. Este recurso não deve ser usado em qualquer situação, existem sites que exigem sobriedade, se você colocar um uma setinha cor de rosa piscando no site de um escritório de advocacia o doutor não vai querer pagar pelo serviço.

Criando um mouse trail com texto

Vamos criar um mouse trail com uma frase ou uma palavra e este texto seguirá o mouse pela área do seu site, de novo um efeito que deve ser usado com parcimônia, pois é mais adequado para sites moderninhos.

1. Escreva um nome qualquer em seu palco, vou usar para o exemplo a palavra “estrela”.

2. Selecione o texto e vamos “quebrá-lo”, isto é, vamos fazer com que cada letra seja um objeto em separado, para fazê-lo clique no menu Modify/Brake apart.

3. O texto terá a aparência abaixo.

4. Agora, separadamente, converta cada uma das letras em Movie Clip.

5. Depois de converter, dê o nome de instância de cada uma de rastro1, rastro2, rastro3, rastro4, rastro5 e assim por diante até a última letra, no caso do meu exemplo, a palavra “estrela”, vou até rastro7.

6. Insira o action abaixo no primeiro quadro da linha de tempo.

this.onEnterFrame = function ()

{

rastro1._x -= (rastro1._x-_xmouse)/2;

rastro1._y -= (rastro1._y-_ymouse)/2;

rastro2._x -= (rastro2._x-_xmouse)/3;

rastro2._y -= (rastro2._y-_ymouse)/3;

rastro3._x -= (rastro3._x-_xmouse)/4;

rastro3._y -= (rastro3._y-_ymouse)/4;

rastro4._x -= (rastro4._x-_xmouse)/5;

rastro4._y -= (rastro4._y-_ymouse)/5;

rastro5._x -= (rastro5._x-_xmouse)/6;

rastro5._y -= (rastro5._y-_ymouse)/6;

rastro6._x -= (rastro6._x-_xmouse)/7;

rastro6._y -= (rastro6._y-_ymouse)/7;

rastro7._x -= (rastro7._x-_xmouse)/8;

rastro7._y -= (rastro7._y-_ymouse)/8;

}

// o ultimo numero antes da ";" é o fator que controla a velocidade com //que

//a letra ira de encontro ao cursor do mouse, por isso que para cada

//conjunto foi dado uma numeração acima, para que cada letra chegue

//num tempo diferente.

Criando um mouse trail com efeito de atenuação

Neste exemplo vamos criar um Movie clip que seguirá o ponteiro original do mouse, mas com efeito de atenuação, funcionando como um elástico, se você mexer o mouse rápido ele começa a seguir o mouse primeiro rapidamente e ao chegar mais perto ele diminui a velocidade até parar.

1. Crie um arquivo no Flash com 400 pixels de largura e 250 pixels de altura.

2. Clique em Insert/New Symbol, escolha Movie clip e de o nome de mouse a ele.

3. Desenhe uma pequena estrela no centro do palco.

4. Converta esta estrela em símbolo gráfico, dê o nome de “estrela”.

5. Clique no quadro 10 da linha de tempo e pressione F6 para criar um quadro-chave.

6. Sem mexer na estrela, insira uma Motion tween entre o quadro 1 e o quadro 10 da linha de tempo.

7. Vamos fazer a estrela girar, dê um clique nela e altere a propriedade Rotate para CW e coloque o número 2 para “Times”, isto quer dizer que ela vai girar duas vezes entre o quadro 1 e o quadro 10 da linha de tempo.

8. Retorne a Scene 1 e insira seu clipe de filme no palco.

9. Selecione seu clipe de filme e insira a action anbaixo.

onClipEvent (enterFrame)

{

_x = _x+(_root._xmouse-_x)*.1;

_y = _y+(_root._ymouse-_y)*.15;

updateAfterEvent();

}

Mouse trail com vários objetos seguindo o mouse e se juntando no final

1. Crie um novo arquivo no Flash com 400 pixels de largura e 250 pixels de altura.

2. Clique no menu Insert/New Symbol, marque Movie clip e dê o nome de “bola”, não há necessidade de se nomear a instância.

3. Retorne a Scene 1.

4. Abra a biblioteca e arraste o Movie clip para o palco.

5. Selecione o Movie clip e insira a action abaixo nele.

onClipEvent (load)

{

p=10, a=8;

}

onClipEvent (enterFrame)

{

for (i=1; i<5; ++i)

{

duplicateMovieClip(this, "bola"+i, i);

_x = _x+_xmouse/p;

_y = _y+_ymouse/p;

_root.bola1._x = _root.bola1._x+_xmouse/-a;

_root.bola1._y = _root.bola1._y+_ymouse/a;

_root.bola2._x = _root.bola2._x+_xmouse/a;

_root.bola2._y = _root.bola2._y+_ymouse/-a;

_root.bola3._x = _root.bola3._x+_xmouse/-a;

_root.bola3._y = _root.bola3._y+_ymouse/a;

_root.bola4._x = _root.bola4._x+_xmouse/a;

_root.bola4._y = _root.bola4._y+_ymouse/-a;

}

updateAfterEvent();

}

Mouse trail com objetos em Alpha

O objetivo agora é criar uma trilha de mouse com uma duplicação do clipe de filme com efeito de transparência nos objetos duplicados.

1. Crie um novo arquivo no Flash com 400 pixels de largura e 250 pixels de largura

2. Clique no Menu Insert/New Symbol, escolha Movie clip, dê o nome de seta e OK.

3. Desenhe a forma que desejas como seta do mouse.

4. Não esqueça de posicionar a ponta da seta na pequena cruz no centro da tela de edição do movie, fazendo isto você determina que este será o local clicável da seta.

5. Retorne a Scene 1.

6. Insira o Movie clip no palco.

7. Dê o nome de “seta” a instância.

8. Clique no seu clipe de filme no palco e insira a action abaixo.

onClipEvent(enterFrame)

{

for(i = 1; i < 4; i++)

{

this.duplicateMovieClip("seta" + i, i);

_parent["seta" + i]._alpha = i * 10;

_parent["seta" + i]._x += (_root._xmouse - _x)/(i * 5);

_parent["seta" + i]._y += (_root._ymouse - _y)/(i * 5);

}

_x += (_root._xmouse - _x)/5;

_y += (_root._ymouse - _y)/5;

}

LISTA DE TODOS OS TUTORIAIS DISPONÍVEIS

LIVROS CAMPEÕES DE VENDA NO SITE

Cursos Online com Certificado e Suporte à Dúvidas

CURSOS ONLINE COM CERTIFICADO - INDICADOS POR JÚLIO BATTISTI EM PARCERIA COM CURSOS 24 HORAS
AdministraÇÃo
Administração Contábil e Financeira Administração de Empresas Administração do Tempo Aprenda a Falar em Público Chefia e Liderança Departamento Pessoal Empreendedorismo Gestão da Qualidade Gestão de Compras	Gestão de Projetos Gestão Escolar Gestão Hoteleira Gestão Pública Logística Matemática Financeira HP 12C Planejamento Estratégico Qualidade de Vida no Trabalho
COMUNICAÇÃO E MARKETING
Administração de Empresas Aprenda a Falar em Público Comércio Exterior Empreendedorismo Escrita e Redação Etiqueta Social e Empresarial Jornalismo Online Marketing Pessoal	Marketing Social Planejamento Estratégico Produção de Eventos Propaganda e Marketing Sucesso Profissional Técnicas de Vendas Telemarketing
CONCURSOS PÚBLICOS
Conhecimentos Bancários Gestão Pública Memorização e Leitura Dinâmica	Noções Gerais de Direito Raciocínio Lógico
CONTABILIDADE E ECONOMIA
Administração Contábil e Financeira Administração de Empresas Bolsa de Valores Comércio Exterior	Conhecimentos Bancários Contabilidade Básica Finanças Pessoais Matemática Financeira HP 12C
DIREITO
Assistente Social Departamento Pessoal	Gestão Pública Noções Gerais de Direito
GESTÃO E LIDERANÇA
Administração de Empresas Administração do Tempo Aprenda a Falar em Público Chefia e Liderança Empreendedorismo Etiqueta Social e Empresarial Gestão de Compras Gestão de Projetos Gestão Escolar	Gestão Hoteleira Gestão Pública Marketing Pessoal Memorização e Leitura Dinâmica Negociação Propaganda e Marketing Recolocação Profissional Secretariado Executivo Sucesso Profissional
INFORMÁTICA
Access 2007 ASP AutoCad 2D AutoCad 3D CorelDraw Excel 2007 Flash Linux MS Project 2007	Photoshop PowerPoint 2007 Raciocínio Lógico Redes e Noções de Hardware Segurança na Internet Webmaster Windows 7 Word 2007 Word e Excel
MEIO AMBIENTE
Educação Ambiental Guia de Turismo	Marketing Social Reciclagem e Energias Renováveis
PEDAGOGIA
Bullying Distúrbios de Aprendizagem Educação Ambiental Educação de Jovens e Adultos Educação Especial	Educação Infantil Escrita e Redação Gestão Escolar Saúde Emocional do Educador
ProfissionalizanteS
Administração de Empresas Assistente Social Comércio Exterior Departamento Pessoal Educação de Jovens e Adultos Educação Infantil Enfermagem Fotografia Digital Gestão da Qualidade Gestão de Compras Guia de Gastronomia	Guia de Turismo Jornalismo Online Logística Produção de Eventos Recepcionista de Hotel Recrutamento e Seleção Secretariado Executivo Segurança do Trabalho Técnicas de Vendas Telemarketing Webmaster
RECURSOS HUMANOS
Administração de Empresas Departamento Pessoal Gestão Pública	Qualidade de Vida no Trabalho Recrutamento e Seleção
SAÚDE
Assistente Social Bullying Enfermagem	Primeiros Socorros Saúde Emocional do Educador Segurança do Trabalho
TURISMO E HOTELARIA
Gestão Hoteleira Guia de Gastronomia	Guia de Turismo Recepcionista de Hotel

CURSOS ONLINE COM CERTIFICADO - INDICADOS POR JÚLIO BATTISTI EM PARCERIA COM BRAVA CURSOS
INFORMÁTICA
Curso de Digitação Formatando e Instalando Computador Excel para Iniciantes Curso Compre no Ebay Informática Educativa Curso de Linux	Segurança na Internet Montagem e Manutenção de Computadores Curso Remoção de Vírus Curso Ubuntu Instalação Linux - Ubuntu
AdministraÇÃo
Gestão de Projetos e Empreendedorismo Benefícios da Previdência Curso HP 12C Matemática Financeira Curso Análise Salarial	Processo de Elaboração de Questionário Excelência no Atendimento ao Cliente Logística do Transporte Licitações e Contratos Administrativos
Profissionalizante
Adestramento Canino Como fazer pesquisa Científica e Monografia Curso de Corte e Costura Supervisor de Telemarketing Balconista de Padaria Curso Educação Infantil	Recepcionista e Secretaria Velas Artesanais Relações Interpessoais Curso de Arbitragem Bullying e Cyberbullying Capacitação de Tutores em EAD
EstÉtica
Curso de Massoterapia Curso de Depilação Drenagem Linfática Curso de Maquiagem Limpeza Turbinada de Pele	Alisamento e Relaxamento Capilar Curso de Etiqueta SPA de Vinhoterapia na Estética Facial Curso de Shantala Introdução à Colorimetria Capilar
Pessoal
Curso de Caligrafia Memorização Chefia e Liderança Curso Falar em Público Curso Bases Neurológicas Leitura Dinâmica Planejamento de Projeto Pessoal Reforma Ortográfica	Como Passar em Concursos Públicos Direção Defensiva Administração do Tempo Curso de Redação Curso de Meditação Como Passar no Vestibular Atualização Gramatical
NegÓCIOS
Relações Humanas e Ética Profissional Marketing e Vendas Diretas	Persuasão em Vendas
Entretenimento
Curso de Mágica
SaÚde
Primeiros Socorros Curso de Fitoterapia Curso de Aromaterapia Medicina Alternativa Plantas Medicinais	Técnicas básicas de Enfermagem O Trabalho do Agente Comunitário de Saúde Ergonomia - Postura Correta em Frente ao Computador Ética Profissional - Ênfase em Radiologia Adolescência: Visão Saúde do Assunto
Meio Ambiente
Curso Gestão Ambiental Jardinagem e Paisagismo	Curso de Reciclagem Curso de Bonsai
MÚsica
Curso de Violão
NutriÇÃo
Higiene e Manipulação de Alimentos Congelamento de Alimentos	Culinária Básica Culinária Intermediária
RelaÇÕes Humanas
Curso Gestão de Pessoas Departamento Pessoal Desenvolvimento Pessoal Empresarial Curso de Telemarketing Curso Dinâmica em Grupo Rescisão Contrato de Trabalho Folha de Pagamento na Prática	Atendimento ao Cliente Adm. da Empregada Doméstica Curso de Homolognet Recursos Humanos - Férias Recursos Humanos - 13° Salário Registro de Empregados
Web Master
Curso de HTML Curso de WordPress	Curso de HTML5
Designer GrÁfico
Curso de Corel Draw Efeitos Especiais com InDesign CS5	Efeitos Tipográficos com InDesign CS5

CURSO EM FORMATO DE VÍDEO-AULA

EXEMPLOS PRÁTICOS PASSO A PASSO COM SOM E IMAGEM

Clique no curso para informações detalhadas

Curso

Duração

Informações

ACCESS

Vídeo Aula: Access 2007 - Consultas - Curso Completo e Prático

4:30h

LOJA DE LIVROS

VÍDEO-AULAS

E-BOOKS/CURSOS

CURSOS ONLINE COM CERTIFICADO

CURSOS COMPLETOS EM CD

CD-01

CD-02

CD-03

CD-04

CD-05

CD-06

CD-07

CD-08

CD-09

CD-10

CONTATO

Você está aqui: Principal » Lista Completa de Tutoriais

Sobre este Tutorial

Mouse trails no Flash

Personalizando o cursor do mouse

Criando um mouse trail com texto

Criando um mouse trail com efeito de atenuação

Mouse trail com vários objetos seguindo o mouse e se juntando no final

Mouse trail com objetos em Alpha

:: Tutoriais Relacionados

CURSOS
COMPLETOS EM CD