DEMIS BUCCI (50 pts)

MARCELO SIQUEIRA (96 pts)

RICARDO TEIXEIRA (40 pts)

DAUTON JANOTA (255 pts)

EDUARDO PERROUD (52 pts)

GUILHERME SCHEIBE (49 pts)

LUIZ AVANCI (51 pts)

JOÃO NETO (78 pts)

DAAFY (55 pts)

PEDRO CLAUDIO (50 pts)

DANIELA PIRES (86 pts)

LEANDRO AMANO (83 pts)
Treinamento PontoFlash de Flash e ActionScript

Gostaria de saber como criar um botão voltar e avançar? Como usar âncoras no Flash?

Como mudar de campo pela tecla TAB?

Como faço para, ao clicar em um Botão minha animação retroceder frame a frame continuamente?

Como fazer para que meu flash aberto com Load Movie tenha fundo transparente.

Gostaria de saber pra que servem os levels?

Qual a vantagem de exportar alguma coisa do Fireworks para o Flash?

Como mascarar uma parte de uma imagem jpg carregada dinamicamente com setMask?

Como traço uma linha no meu filme com o mouse?

Dicas para seu movie ficar mais enxuto.

Como faço um stop and play no som.

Porque o loop FOR..IN nem sempre gera o mesmo resultado do FOR convencional?

Tenho um site em flash5 e em uma página gostaria de colocar uma senha para entrar?

Preciso que um campo de texto exiba um arquivo txt e como usar o loadVars?

Alguém sabe como usar o swapDepths?
Como usar o Flash com o FrontPage?

Gravidade no Flash.

Plugins variados para seu trabalho em design

Botão avançar e recuar.

Como fatiar um site modelo portal no Fireworks

Avaliação do site de O Boticário

Grade sonora.

Separar mensagens das listas das pessoais, usando o Outlook

Preloader real no Flash5.

Color changer

Redimensionar um filme no modo de edição

Barneys_menu.
Eventos MX

Call

Texto matrix

Pista de corrida

Borboleta

Mapa - Países com A 1

Drag gravity

MX cria campo

Dynamic menu

Ball & shad

Blaublau

Televisão
HOME | TUTORIAIS
Desenvolvendo um Tocador de Vídeo em Flash
por Leandro Amano

Nas próximas linhas estarei demonstrando o poder do Flash em relação a vídeos para Web. Afinal, se uma imagem vale mil palavras, um vídeo vale um milhão delas.

Conhecimentos: Este artigo pede um conhecimento básico de ActionScript, mas é necessário ter uma familiaridade com o Flash.

Antes de mais nada, o Flash pode trabalhar de três formas com vídeo.
A primeira delas é integrando o vídeo diretamente ao .fla, através de um simples "File - import", esta é a opção mais desagradável de todas, pois geralmente o usuário precisa carregar todo o conteúdo antes que possa visualizá-lo. Claro que isso pode ser mudado, mas exige mais do desenvolvedor, que nem sempre tem conhecimento suficiente para fazê-lo.
A segunda forma é através de vídeos externos ao Flash, arquivos de extensão "flv", os quais são obtidos mesmo apenas com o Flash MX 2004. Para isso importe o vídeo para dentro do arquivo .fla. Após as configurações de importações, ele terá uma instância na Library, onde podemos acessá-lo diretamente. Para converter em .flv é simples, basta clicar com o botão direito e pedir Properties - Export, automaticamente, ele pedirá o nome do arquivo a ser exportado, como mostrado abaixo:

Tendo f inalizado isso, você já tem o arquivo de extensão flv.
Apesar do próprio Flash MX 2004 gerar esse formato, recomendo o uso do Sorenson Squeeze.
A vantagem de se utilizar esse formato, é que a Frame Rate do vídeo pode ser diferente a do seu filme principal, além da distribuição externa de arquivos, é claro. Mas a principal vantagem que considero é a possibilidade da utilização de Classes, que na versão MX só era possível com o Macromedia Flash Communication Server, como as actions netConnection e netStream.
O terceiro modo é o Streaming real. Os modos mencionados anteriormente podem ser chamados apenas de Download Progressivo, pois o usuário final consegue guardar o arquivo para si, o que muitas vezes é proibido.
Não irei entrar em detalhes sobre cada um dos três modos, neste breve tutorial vou criar um tocador de vídeos utilizando os objetos que todo desenvolvedor do Flash MX 2004 possui, os componentes do tipo Media Components.

No Flash Document em branco:

Vamos antes de mais nada, para um bom desenvolvimento é preciso nomear as layers que vamos trabalhar:
Na layer do topo, vamos chamar a layer de as(actionScript), vamos criar mais duascom os nomes control e display.
Recomendo que a layer de Action fique acima das outras.
Em seguida, abriremos o painel de components, o caminho é: Window - Development Panels - Components.
Com o painel aberto, abra a opção Media Components e arraste o MediaController e o MediaDisplay para suas respectivas layers.

Devido ao component MediaDisplay não ter um objeto visual, clique na opção da layer: show as Outlines (fica ao lado do cadeado), isso deixará o objeto em evidência para podermos visualizá-lo.
Vamos aplicar aos components seus identificadores de instância: _display para o MediaDisplay e _control para o MediaController.
No layer as, fazemos o seguinte:

var _display:mx.controls.MediaDisplay;
var _control:mx.controls.MediaController;

Isso nos permite acessar as propriedades e métodos dos componentes mais facilmente.
Através das actions abaixo vou dizer ao Flash qual filme chamar e avisá-lo que o component _control e _display estão associados:

_display.associateController(_control);
_display.setMedia("flv/video.flv", "FLV");

Note que no setMedia, coloquei o vídeo em uma pasta separada, de nome flv. Isso adota uma prática importante de organização de arquivos do aplicativo. O nome do arquivo será o arquivo de cada um, no meu caso o mesmo se chama video.flv.
Vamos a mais algumas actions:

_display.totalTime = 237; //Equivale 3 minutos e 57 segundos
_control.controllerPolicy = "on";

O meu filme possui 3 minutos e 57 segundos, por isso 237 será meu tempo total de filme (totalTime)((60x3)+57) .
O controllerPolicy apenas nos deixa o _control setado como visível.

Apenas isso já resolve boa parte de nossos problemas, podemos até testá-lo. O filme já está funcionando com o tocador!
A partir de agora vou mostrar alguns passos simples para início de uma criação customizada de MediaPlayer.
Vamos adionar mais uma layer abaixo de as, de nome user.
Nesta layer, devemos desenhar dois botões (na verdade o símbolo será Movie Clip, mas ele funcionará como botão), mas apenas o botão stop poderá ter seu icone associado, o botão play deve conter apenas seu formato, e ter desenhado na parte de fora mais dois MovieClips, com ícones play e stop, como abaixo:

O mais importante de tudo nesse momento é converter em separado cada um dos quatro objetos em Movie Clip, sendo que os ícones de Play e Pause terão um linkage. Para quem não conhece, é só pedir na hora da conversão Advanced - Selecionar o CheckBox de nome: Export for ActionScript, e aplicar um nome, o mc play terá o nome de play e o pause o nome de pause.

Feito isso, podemos deletar do palco os objetos play e pause.
Isso porque estaremos chamando-os direto da Library (e também por serem muito leves). Na prática não deve fazer isso, pois as action de preload não detectam esses objetos, deveríamos de forma correta, deixá-los em uma parte escondida do palco.
Vamos instanciar os dois objetos que restaram de btPlay e btStop e aplicar suas declarações nas actions:

var btPlay:MovieClip;
var btStop:MovieClip;

E vamos também tirar seus cursores de mão:

btPlay.useHandCursor = false;
btStop.useHandCursor = false;

Agora, iremos fazer o seguinte, a instância do botão play já deve começar com o ícone "pause", já que o vídeo começa tocando. Para isso:

btPlay.attachMovie("pause", "mcIcon", 0);

Vamos então colocar as actions dos botões. Se estiver tocando e pressionarmos pause, o botão deve pausar e inserir o ícone play no botão, além disso o botão stop também deve parar o filme, e também fazer com que o botão play troque de ícone:

btPlay.onRelease = function() {
if (!_display.playing) {
_display.play();
this.attachMovie("pause", "mcIcon", 0);
} else {
_display.pause();
this.attachMovie("play", "mcIcon", 0);
}
};

btStop.onRelease = function() {
_display.stop();
btPlay.attachMovie("play", "mcIcon", 0);
};

Podemos ver agora que nosso player possui botões personalizados. Isso é o interessante do Flash, a possibilidade de customizarmos tudo. E mais, vamos fazer com que o Flash nos retorne uma mensagem dizendo se está ou não tocando e também se o filme acabar, ele nos deve retornar um evento:

this.createTextField("_status", _root.getNextHighestDepth(), 18, 353, 1, 1);
_status.autoSize = true;
_status.selectable = false;
_status.html = true;
_status.htmlText = "O <b>vídeo</b> está tocando...";var evento:Object = new Object();
evento.complete = function() {
trace("Acabou o filme!");
_status.htmlText = "O <b>vídeo</b> está parado";
};
_display.addEventListener("complete", evento);

Dentro dos botões as actions com os textos também deve existir, o resultado final em nosso frame 1 é:

var _display:mx.controls.MediaDisplay;
var _control:mx.controls.MediaController;
var btPlay:MovieClip;
var btStop:MovieClip;
this.createTextField("_status", _root.getNextHighestDepth(), 18, 353, 1, 1);
_display.associateController(_control);
_display.setMedia("flv/video.flv", "FLV");
_display.totalTime = 237;
_control.controllerPolicy = "on";
_status.autoSize = true;
_status.selectable = false;
_status.html = true;
_status.htmlText = "O <b>vídeo</b> está tocando...";
btPlay.useHandCursor = false;
btPlay.attachMovie("pause", "mcIcon", 0);
btPlay.onRelease = function() {
if (!_display.playing) {
_display.play();
this._parent._status.htmlText = "O <b>vídeo</b> está tocando...";
this.attachMovie("pause", "mcIcon", 0);
} else {
_display.pause();
this._parent._status.htmlText = "O <b>vídeo</b> está parado";
this.attachMovie("play", "mcIcon", 0);
}
};
btStop.useHandCursor = false;
btStop.onRelease = function() {
_display.stop();
this._parent._status.htmlText = "O <b>vídeo</b> está parado";
btPlay.attachMovie("play", "mcIcon", 0);
};
var evento:Object = new Object();
evento.complete = function() {
trace("Acabou o filme!");
};
_display.addEventListener("complete", evento);

Nosso player básico está feito, o próximo player é com vocês!

Baixe aqui um arquivo desse tutorial
Para um exemplo do que pode ser feito: www.flashfor.com.br/flashvideo

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
6 comentários


Comentário de MELO.K HEMATOZINAH
| 29/10/2010 - 14:18 |
http://HIPHOPANGOLANO.WEBS.COM

GRANDE FONTE DO FLASH OBRIGADO VALEU BWÉ! SEMPRE MELO.K HEMATOZINAH DO SITE DE HIPHOP HTTP://HIPHOPANGOLANO.WEBS.COM



Comentário de Marcelo Chaves Altoé
| 21/5/2010 - 10:10 |
http://www.novavenecia.webs.com

Oi eu gostaria de saber se tem algum programa para fazer flash simples entre no meu site e de uma olhada eu so to com um flash e eu to querendo para fazer da quele modelo . desde ja agradeço ,, www.novavenecia.webs.com



Comentário de Marcelo Chaves Altoé
| 21/5/2010 - 10:10 |
http://www.novavenecia.webs.com

Oi eu gostaria de saber se tem algum programa para fazer flash simples entre no meu site e de uma olhada eu so to com um flash e eu to querendo para fazer da quele modelo . desde ja agradeço ,, www.novavenecia.webs.com



Comentário de Fabio Henrique
| 17/5/2010 - 11:55 |


Primeiramente o tutorial é muito bom! Só tenho uma pergunta! Eu vi que no código o nome do vídeo está estático com fazer com que isso seja dinâmico? Ou seja, passar o nome do arquivo através da url?



Comentário de Marcos Souza
| 13/4/2010 - 15:30 |
http://www.k3design.com

Parabéns pela iniciativa, a comunidade agradece, este tuto me ajudou bastante, me deu uma luz. Existe uma forma de passar 3 movie1, movie2, movie3 sequencilamente dentro da mesma mediaDisplay, por meio de AS, XML ou TXT??? Se puder dar um caminho será bem vindo! Parabéns.



Comentário de luis
| 2/4/2010 - 19:54 |


em relação ao tocador de video este deu-me muito jeito e tá muito bom, mas eu precisava que no final ele fizesse loop o que aparecesse um botão de replay, como posso fazer isso? obrigado






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