DENIS CARAVALHO (85 pts)

IRAPUAN MARTINEZ (45 pts)

PEDRO CLAUDIO (50 pts)

MUZAK (45 pts)

MARCOS JOSÉ PINTO (44 pts)

RICARDO FIGUEIRA (33 pts)

ILVA RUDEV (90 pts)

RICARDO TEIXEIRA (40 pts)

NETO LEAL (116 pts)

FLASHGURU (155 pts)

LUI FERNANDO (151 pts)

ZEBEDIAH (35 pts)
Treinamento PontoFlash de Flash e ActionScript

Quando e para que usar function (função), var, length e o objeto "arguments"?

Como faço para colocar uma pausa no meu filme?

Porque meu texto não aparece dentro de uma máscara?

Como separar os canais de cores no photoshop? As 4 cores (CMYK) e o branco.

Como fazer um fade em um movieclip, do 100 a 0%?

Como desenhar círculos e bolas dinamicamente no FlashMX?

Como eu faço um relógio digital e com data junto?

Como faço para ler uma variável do flash no JavaScript com o GetUrl?

Algumas dicas de tipografia.

Problemas para visualizar o site no MAC?

Quero que quatro movie clips percorram o stage e parem um abaixo do outro.

Como deletar um lote de variáveis com apenas um comando?

Meu texto vem sem acentos e sem caracteres especiais quando o importo dinamicamente.

É possível redimensionar um jpg aberto dinamicamente?
Movimentar MC com barra de rolagem e setas

Nikefootball, uso e abuso do flash - Avaliação de sites

Jogo de colorir.

Spectrum Analizer - Medidores de som

Line Draw

Funções de actionscripts

Níveis dentro do Flash - Load Movie e Load Variables (segunda parte)

Fireworks, o patinho feio da Macromedia.

Post comments (Livro de Visitas)

Scroll - Rolagem de textos e Imagens

Janelas tipo Windows com Swap Depth

Número randômicos sem repetições no Flash 4.
Combobox com interação em ASP

Txt com preloader

Slicemenu 2

Delay

Desenho livre

Barra deslizante

Botão comutador

Mouse Position

Spiral show

Starfield

Emotion

Counter
HOME | TUTORIAIS
Desenvolvendo um Controle de Volume Customizado em Flash
por Leandro Amano

Conhecimentos: Este artigo pede um conhecimento básico de ActionScript, mas é necessário ter uma familiaridade com o Flash. Como por exemplo, já saber o uso adequado de instâncias.

Bom, trabalhar com som é sempre um risco, existem inúmeros usuários que adoram som no site, pelo contrário, não muito raro o inverso ocorre muitas vezes...
O ideal é sempre ter a opção de desligar o som, para aqueles que não gostam terem a opção de parar o som.

Algo muito importante no desenvolvimento desse dispositivo no site é editar o som antes de vir para o Flash, com compressão já correta, de preferência MP3, WAV é muito usado por aí, mas apesar do Flash comprimir para exportação em MP3 isso não significa que o arquivo será comprimido, isso nunca deve ser esquecido, já que o som é algo quase sempre excessivamente pesado. No nosso caso estaremos trazendo o som MP3 de fora, pode ser qualquer som, desde que seu volume seja o mesmo, do início ao fim, isso será útil para testarmos o dispositivo.

Estaremos desenvolvendo algo simples agora, mas podemos fazer tocadores muito mais complexos, como trazer uma playlist de banco de dados, com todos os controles de som.

O som já deve estar editado neste momento.

No Flash Document em branco:

Já salvem o arquivo na mesma pasta do som logo de início.
Vamos clicar no painel Insert - New Symbol e pedir um Movie Clip.
Vamos antes de mais nada, neste MovieClip nomear as layers que vamos trabalhar:
Na layer do topo, vamos chamar a layer de as(actionScript), vamos criar mais quatro, com os nomes play e stop, drag e areaTotal .
Recomendo que a layer de ActionScript fique acima das outras.
Em seguida, na layer play, vamos desenhar nosso Botão ou Movie Clip que será nosso ícone para tocar o som, nome de instância $play.
Na layer stop a idéia é a mesma, não esquecendo que é um símbolo MovieClip ou Botão, nome de instância $stop.
Na layer drag, vamos desenhar o objeto que será arrastado para que o volume seja alterado, será um MovieClip, detalhe que seu ponto de registro deve ficar ao centro, seu nome de instância é drag.
Na última layer, areaTotal, desenhemos um traço que cubra 200 px de largura, no ponto 0 do _x e _y na barra de propriedades, ficará assim:

Depois de desenhado, boa parte do processo já está feito, em uma divisão de trabalho correta, essa seria a hora do desenvolvedor colocar a mão na massa, devido ao nosso exemplo ser simples, o próprio designer poderá fazer.
No layer as, chamamos as actions (F9) e fazemos o seguinte:

var som:Sound = new Sound();
   som.loadSound("som.mp3", true);
   som.onLoad = function() {
   som.start(0, 1);
};
som.onSoundComplete = function() {
   som.start(0, 1);
};

Através da declaração do tipo Sound, o Flash nos permite acessar as propriedades e métodos da classe de som mais facilmente.
Explicando cada uma das actions:

var som:Sound = new Sound(); // Declara uma nova instancia de objeto da classe Sound.

som.loadSound("som.mp3", true); // Carrega para o Flash o som externo .mp3, pode ser acessado local ou remotamente, o segundo parâmetro diz que o som estará em streaming.

som.onLoad = function() {
som.start(0, 1);
};
// Estamos dizendo ao Flash que ao carregar o som (onLoad), ele deve começar a tocar, então play no som!

som.onSoundComplete = function() {
som.start(0, 1);
};
// Para que o som fique em loop constante, ao terminar o som, o Flash começará a tocar de novo, gerando um loop infinito neste caso.

Para ficar mais fácil de manusear o código, e não gerar o famoso espaguete, vou colocar todos os códigos no frame 1 de as.
Ainda no painel de actions:

var drag:MovieClip;
with (drag) {
   _x = 195;
   _y = 0;
}
drag.onPress = function() {
   this.startDrag(false, 0, 0, 200, 0);
   drag.onEnterFrame = function() {
      som.setVolume(Math.round(drag._x-200+(200)));
   };
};
drag.onRelease = function() {
   this.stopDrag();
};

Bom, estamos dizendo que o objeto MovieClip drag será um MovieClip, e com (with) este objeto, suas propriedades _x e _y serão inicialmente os valores acima.

drag.onPress = function() {
this.startDrag(false, 0, 0, 200, 0);
drag.onEnterFrame = function() {
som.setVolume(Math.round(drag._x-200+(200)));
};
};
// Isso diz ao Flash que ao "pressionarmos" a barra Drag, ele começara a ser arrastado, onde seus alcances são left (esquerda), top (topo), right (direita), bottom (abaixo), isso delimita a área máxima do arrasto.
O evento enterFrame cria um loop para a animação interna, neste caso, permite ao Flash entender que ao arrastar o som será alterado com base no corpo da função, onde arredondamos (Math.round()) o _x do drag, essa conta gera um número de 0 a 200, que é exatamente nossa área de arrasto.

Devemos parar o evento de arrasto ao soltar o mouse, então:

drag.onRelease = function() {
   this.stopDrag();
};

Ainda mais para os engraçadinhos:

Ou seja, ao soltar clique do mouse (release), o drag irá parar.
Nos faltam agora unicamente os botões play e stop, mas o drag já funciona, podem testar.

Actions no mesmo frame, abaixo das anteriores:

var $play:MovieClip;
$play.onRelease = function() {
   drag.onEnterFrame = function() {
      drag._x += (200-drag._x)/10;
      som.setVolume(Math.round(drag._x-200+(200)));
      if (drag._x>=200) {
         drag._x = 200;
         delete drag.onEnterFrame;
      }
   };
};

Já vimos basicamente todo o código acima, com exceção de algumas contas, essas nos permite criar algo mais interessante no Flash, com base no conceito físico de aceleração, como não é nosso assunto, vou explicar por cima seu uso, posição do objeto (x ou y) será igual a posição final do objeto, mais (ou decremento) a posição atual do objeto, dividido pelo tempo, então: drag._x += (200-drag._x)/10;

Caso o _x do objeto ultrapasse os 200, seu _x será de 200 e mando deletar o evento do enterFrame, para que o Loop não entre em conflito com outro evento no mesmo objeto, além de poupar memória também.
Actions do stop, abaixo das anteriores:

var $stop:MovieClip;
$stop.onRelease = function() {
   drag.onEnterFrame = function() {
      drag._x -= (200-drag._x)/10;
      som.setVolume(Math.round(drag._x-200+(200)));
      if (drag._x<=0) {
         drag._x = 0;
         delete drag.onEnterFrame;
      }
   };
};

Também não a muito o que explicar, com exceção de nossa condição (if) que diz que se o drag na posição horizontal for inferior a 0, sua posição será a mesma e seu loop será deletado.

O resultado final em nosso frame 1 é (coloquei alguns comentários para separar o código, a fim de uma boa documentação) :

/////////////////////////////////
// CARREGA O SOM
/////////////////////////////////
var som:Sound = new Sound();
som.loadSound("som.mp3", true);
som.onLoad = function() {
   som.start(0, 1);
};
som.onSoundComplete = function() {
   som.start(0, 1);
};
/////////////////////////////////
// VOLUME
/////////////////////////////////
var drag:MovieClip;
with (drag) {
   _x = 195;
   _y = 0;
}
drag.onPress = function() {
   this.startDrag(false, 0, 0, 200, 0);
   drag.onEnterFrame = function() {
      som.setVolume(Math.round(drag._x-200+(200)));
   };
};
drag.onRelease = function() {
   this.stopDrag();
};
/////////////////////////////////
// PLAY
/////////////////////////////////
var $play:MovieClip;
$play.onRelease = function() {
   drag.onEnterFrame = function() {
      drag._x += (200-drag._x)/10;
      som.setVolume(Math.round(drag._x-200+(200)));
      if (drag._x>=200) {
         drag._x = 200;
         delete drag.onEnterFrame;
      }
   };
};
/////////////////////////////////
// STOP
/////////////////////////////////
var $stop:MovieClip;
$stop.onRelease = function() {
   drag.onEnterFrame = function() {
      drag._x -= (200-drag._x)/10;
      som.setVolume(Math.round(drag._x-200+(200)));
      if (drag._x<=0) {
         drag._x = 0;
         delete drag.onEnterFrame;
      }
   };
};

Usei um exemplo no mesmo estilo em: www.lopes.com.br/acl (desabilite o anti pop-up)

Grande abraço e até a próxima!



Devido à reformulação implementada no site, pode ser que você encontre alguns links quebrados. Por favor, ajude-nos a corrigir eventuais problemas nos informando links quebrados
4 comentários


Comentário de mariana
| 15/1/2011 - 19:49 |
http://www.pontoflash.com.br

adorei faço curso e tenho uma prova amanha e com esses conheçemintos vao me ajudar bastante pq vcs as vezes num manda umas dicas pra mim no meu email



Comentário de mariana
| 15/1/2011 - 19:49 |
http://www.pontoflash.com.br

adorei faço curso e tenho uma prova amanha e com esses conheçemintos vao me ajudar bastante pq vcs as vezes num manda umas dicas pra mim no meu email



Comentário de devflash
| 12/1/2011 - 17:29 |


Muito bom exemplo! criação de sites



Comentário de Jota
| 3/3/2010 - 22:23 |


O som nao para quando o botao stop e acionado. Tambem nao some quando o botao volume desliza ate o inicio.






Visite o perfil de LEANDRO AMANO no portal PontoFlash

Atualmente é designer, Macromedia User Group Leader, sócio da Amano & Venegas, instrutor Macromedia na ENG DTP & Multimídia em São Paulo - SP e instrutor de Pós Graduação de Engenharia de WebSites na Unicsul - SP. Site pessoal www.leandroamano.com.br