DEN IVANOV (260 pts)

LEANDRO AMANO (83 pts)

PEDRO CLAUDIO (50 pts)

MUZAK (45 pts)

GUILHERME SCHEIBE (49 pts)

LUI FERNANDO (151 pts)

ZEBEDIAH (35 pts)

JOÃO NETO (78 pts)

JONAS GALVEZ (521 pts)

MAURO ROCHA TAVARES (40 pts)

GÉRIO (93 pts)

LUIZ HERRERA (117 pts)
Treinamento PontoFlash de Flash e ActionScript

Como identificar o ponto de registro em um objeto criado por actionscript no MX?

Aula teórica de interação flash + script.

Como dividir valores numéricos vindo do MySql com vírgula (12,50)?

Como faço um cursor customizado apenas em uma determinada área do site?

Como otimizar um filme no Flash?

Como faço para um objeto seguir em um caminho sinuoso?

Importei um .MOV pro flash, só que quando testo, o vídeo não começa.

Como tornar um objeto com alpha zero quando eu clicar em um dos outros itens?

Tem como importar paletas de cores para o Flash?

Como esconder o cursor (a mãozinha) quando ele passar por cima do botão?

Como retardar (delay) o início de uma apresentação em Flash?

Como tornar palavras inseridas em um scroll em links clicáveis?

Como fazer com que a rotação de um ponteiro demore 10 segundos?

Queria enviar um formulário via ASP usando a classe LoadVars e o método sendAndLoad.
Contador usando SharedObjects.

Configurando texto via actionscript.

Alternando janelas no Flash.

Inserir dados no ASP via formulário no Flash.

Imagem Pixel a Pixel no PhotoShop.

Comunicação Flash-PHp-MySql - introdução

Janelas pop-up e semi-full no flash

Aplicativo Dirigido por Dados com XML

Aprendendo a interagir Flash e ASP

Desenhando apenas com Actionscript.

Criando um Editor HTML com o MM Flash

Load Movie no FlashMX (swf, jpg e mp3).
Time left preloader

Quebra Cabeças

Botão ida e volta

Openmask

Tint rgb

Txt com preloader

Ponto e inércia

F5menu popup

Flash Banner

Textos animados

Efeito Blur

Gettimer
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