topo
topo
topo
Quarta, 18 de Outubro de 2017.
portaldigidesign
menu principal
No Site Na Web
slogan
 
:: Home
:: Fórum
:: Newsletter
:: Na Mídia
:: Recomende-nos
:: Nossos banners
:: Rss Feeds
:: Contato
 
menu design
:: Flash
:: Dreamweaver
:: Fireworks
:: Swishmax
:: Photoshop
:: Corel Draw
:: Ícones
:: Tabela de cores
:: Layouts prontos
 
menu programação
 
:: PHP
:: Asp/.Net
:: Javascript
:: CGI
:: Cold Fusion
 
menu serviços
 
:: Geradores online
:: Indique o site
:: Usuários online
:: Contador
 
menu sites destaque
 
:: Indique seu site
:: Sites destaque
 
menu artigos
 
:: Web Marketing
:: Web acessibilidade
 
 
 

· Artigos » SwishMax

 

SwishMax - Preloader  English Version

Por: Ivan W. Primo
Publicado em: 25.03.2005
Visualizações: 75379


rec6 Linkto delicious google yahoo live Twiter

SwishMax - Preloader

Hoje vamos aprender a criar um componente indispensável em nossas animações, um simples preloader. As animações criadas no Swishmax são extremamente compactas e leves, mas quando usamos várias imagens e sons dentro do filme ele pode ficar um pouco mais "pesado". Isto torna o preloader essencial. O preloader faz com que uma mensagem de "carregando" seja exibida até que a cena principal do filme seja completamente carregada e então exibida. Isto prende a atenção do usuário e desperta nele a curiosidade em ver o resultado daquilo que está sendo carregado.

Pra começar, crie um novo documento com dimensões de 150x50px. Depois, vá ao painel "Outline" e renomeie a cena para "preloader".

""

Em seguida clique no botão "Insert" e desça até "Scene" para inserir uma nova cena. Renomeie esta cena para "principal".

""

Agora temos duas cenas assim:

""

Com a cena principal selecionada, crie no palco a sua animação. Vamos usar como exemplo uma imagem e um texto animados.

Para importar uma imagem clique no botão "Insert Image" ou no menu "Insert > Image".

""

Escolha uma imagem do seu computador e ajuste a dimensão usando as alças de redimensionamento. Posicione a imagem no palco da maneira como desejar.

""

Depois digite um texto qualquer e aplique alguns efeitos ao texto e à imagem. Use o botão direito do mouse clicando sobre a linha do tempo e escolhendo os efeitos no menu que surge.

""

Ótimo, agora com a nossa cena principal terminada, vamos ao que interessa, o preloader!

No painel "Outline" selecione a cena "preloader". Em seguido clique no botão "Insert Text" ou menu "Insert > Text" e digite no campo de texto do lado direito do palco, a palavra "carregando". Posicione ao centro do palco este texto. Eu usei a fonte Arial tamanho 20 em negrito.

imagem 7""

Agora clique com o botão direito do mouse sobre o primeiro frame da linha do tempo. No menu que surgir desça até "Looping continuously" e escolha o efeito "Wild - Rainbow".

imagem 8""

depois de feita a parte visual, agora vamos para a parte funcional do preloader. Vamos criar o swishscript que fará o preloader funcionar.

Clique na aba "Script" sobre o palco. Em seguida vá até a linha do tempo e selecione o frame 1.

Depois clique sobre o botão "Add Script" e vá até "Events > Frame > onFrame" para adicionar um evento ao frame 1.

Note logo abaixo da área de edição de scripts, surgiu um painel. Vá até este painel e marque a opção "After events for placed objects"

imagem 9""

Certifique-se que o script onFrame está selecionado na área de edição e clique novamente no botão "Add Script" e vá até "Conditional > if(frameLoaded(...)){".

No painel que surgir abaixo, clique no drop down "Target" e escolha "principal" pois é esta cena que nós queremos que o filme exiba depois que ela for carregada. No campo "Frame" digite o valor 1 pois este é o frame da cena principal que deve ser exibido inicialmente.

imagem 10""

Certificando-se de que a última parte do script que criamos esteja selecionada, clique novamente em "Add Script" e agora vá até "Movie Control > gotoAndPlay > gotoAndPlay(FRAME)".

Observe o painel de propriedades abaixo e no drop down "Target" escolha "principal". No campo frame digite 1 e deixe marcada a opção "Play"

imagem 11""

Seguido corretament estes passos, seu script deverá estar exatamente assim:

imagem 12""

Opa, calma lá!! Não acabou ainda!!! Ainda tem mais duas partes do swishscript...

Se você não alterou a duração do efeito que você aplicou ao texto "carregando" então ele está com 20 frames de duração. Então vá ao frame 21 e clique sobre ele pois agora vamos adicionar eventos a este frame. Vamos criar um looping para que o efeito do texto do preloader se repita até que a cena principal seja completamente carregada.

Se você alterou a duração do efeito, clique sobre o frame imediatamente posterior ao final do efeito. Aqui, para efeito didático vamos usar a duração padrão dos efeitos que é 20 frames.

Depois de selecionar o frame 21, clique no botão "Add Script", vá até "Events > Frame > onFrame(...)".

No painel que surgir abaixo da área de edição, marque a opção "After events for placed objects".

imagem 13""

Tendo esta linha do script ainda selecionada, clique novamente em "Add Script" e vá até "Movie Control > gotoAndPlay > gotoAndPlay(FRAME)".

No painel das propriedades selecione "preloader" no campo "Target" e deixe 1 no campo "Frame". Assim estamos criando o looping do preloader. Enquanto a cena principal não estiver completamente carregada, o filme retorna ao frame 1 do preloader.

imagem 14""

Seu script deve estar assim:

imagem 15""

Tá pensando que acabou? Rs.. Cabou não!!! Agora vamos para a última parte...

Clique agora sobre o frame 22 na linha do tempo para selecioná-lo. (Suponho que sua animação de texto dura os 20 frames padrão).

Clique no botão "Add Script", vá até "Events > Frame > onFrame(...)".

No painel que surgir abaixo da área de edição, marque a opção "After events for placed objects". (Não vou colocar imagem porque é a terceira vez que fazemos a mesma coisa, rs..)

Agora clique "Add Script > Frame > preloadContent()". Opa, agora sim o filme entende que trata-se de um preloader!

Seguindo os passos corretamente seu swishscript terá de ficar assim:

imagem 16""

Prontinho! Um pouco trabalhoso mas muito eficiente! Para testar você deve enviar para o seu servidor web. Dependendo do tamanho final do filme ou da velocidade de conexão do usuário, o preloader nem será exibido, mas para filmes com várias imagens e sons o preloader será essencial. Neste tutorial procurei mostrar como se faz o script do preloader. O filme gerado aqui ficou extremamente pequeno. Em filmes maiores você poderá notar melhor o efeito final. O importante é que você conheça o caminho para fazer um preloader com eficiência.

Se desejar baixar o swi deste tutorial clique aqui...

Abraços e até breve com muito mais SwishMax!!!




Versão para impressão  Twitter



 

  Comentários:

· guiga  Postado em: 25.05.2007
Como faco para salver e colocar no front page ?

· dama del alba  Postado em: 21.05.2006
Hola Ivan.. navegaba por la red buscando un tutorial de preloader y obaaa aqui tengo uno muy bueno y estoy muy agradecida por ese interesante tutorial. Hacia tiempo que intentaba hacer un preloader y nada funcionaba.. Muchas Gracias Ivan..
Beijos
dama

· Jaime Labres  Postado em: 22.04.2006
Bom este preloader, funciona mesmo, valeu

· Felipe  Postado em: 18.03.2006


· João Fábio  Postado em: 12.03.2006


· Anderson Lovatel  Postado em: 10.01.2006


· Uilian Ted  Postado em: 26.08.2005


· [www.dualconsultores.com] Rafael Braga  Postado em: 18.07.2005


· Carla Maria  Postado em: 04.07.2005


· Cristina Figueira  Postado em: 25.05.2005
Finalmente consegui aprender a fazer um preloader, obrigada Ivan mais uma vez vc foi o maximo.

· Billy Garcia  Postado em: 07.04.2005


· www.mxmasters.com  Postado em: 28.03.2005
Muito bom. Gostei muito desse programa

Nome: Digite seu nome.Digite seu nome.
Email: Campo Obrigatório. Formato Inválido.
Comentário:   Campo Obrigatório.Digite ao menos 8 caracteres.Até 100 caracteres.
   

   rss

 
hospedagem Host Brasil
Dreamweaver
Fireworks
Flash
SwishMax
Corel Draw
Photoshop
Photoshop
PHP
Asp/.Net
Web Marketing
publicidade
   

 

rodape rss Siga-me no Twitter