Revista Active Delphi
terça-feira, 9 de fevereiro de 2010
Busca  
Porta 80 Web Hosting
 :: Acessibilidade
Ir para conteúdo principal: ALT + 1
 :: Participe
Seja um autor de CD/DVD de Treinamento
Publique um artigo
Publique uma oportunidade
Publique uma notícia
Publique um curso
Publique uma dica
Publique um código
 :: Informativo
Receba nossos informativos por e-mail.
E-mail:   
 
Digite a palavra abaixo:  
 
 
 :: Oportunidades
Cadastrar oportunidades
Gerenciar suas oportunidades
Cadastrar nova empresa
 :: Especiais
Básico de C++
C++ Builder
Curso ASP.NET 3.5 em VB.NET e C#
Guia Prático de HTML
Testes com Visual Studio Team System 2008
 :: Desenvolvimento
ActionScript
ADO.NET
ASP
ASP.NET
Automação Comercial
C#
C/C++
Coldfusion
CSS
Delphi
Disp. Móveis
HTML
Java
Javascript
LSL (Second Life)
Modelagem
PHP
Python
Sharepoint
Silverlight
SQL
VBA (Office)
Visual Basic
Visual Basic .NET
Visual Fox Pro
WCF/WPF
Web Services
XML
 :: Infra
BizTalk Server
CRM
Exchange Server
ForeFront / Antigen / IAG
Interoperabilidade
ISA Server
Linux
MOF
MS Dynamics CRM
Network
OCS / LCS
Outlook
Powershell e Scripts
Redes
Segurança
System Center e Gerenciamento
Virtualização
Windows
Windows Server
 :: Banco de Dados
Access
Caché
Firebird
Interbase
MySQL
Oracle
SQL Server
Sybase
 :: Gerência
Arquitetura
Ciclo de Vida de Desenvolvimento
Controle de Versão
Estimativas
Metodologias
MOF
Qualidade e Testes
 :: Design
Corel
Flash
Photopaint
Photoshop
 :: Livros
Análise Sistemas
Aplicativos
Banco de Dados
Certificação
Design e CAD
Gerência
Hardware
Internet
Programação
Programação Web
Rede
Segurança
Servidores
Sistemas Operacionais
 :: CDs/DVDs
Desenvolvimento
Infra
Design
 :: E-Books
.NET 2.0 (VS 2005)
.NET 1.1 (VS 2003)
SQL Server
Excel 2007
Excel 2003
Access 2003
ASP 3.0
Delphi
Java
Artigos
Video-player em AS3 no Flash - Parte 1
Por: Rafael Costa
[Entre em contato com o autor ]
Programador Actionscript há 2 anos. Participante do fórum FlashMasters, maior comunidade Flash do Brasil.
Além de Actionscript, possui conhecimentos em outras linguagens como: JavaScript, CSS, XHTML, PHP e MySQL.
Para saber mais sobre o autor, visite seu site: http://www.rafaelcosta.com.
Feed de artigos.
Feed de artigos deste autor.
Gere seu feed personalizado  
Video-player em AS3 no Flash - Parte 1
Publicado em: 04/04/2008

Resumo:
Veremos como criar um player de vídeo utilizando ActionScript 3 no Flash, utilizando Streaming.

Tutorial:
Muitas pessoas usam componentes prontos do Flash para rodar seus vídeos, como o FLVPlayback, mas não sabem que é relativamente fácil criar um próprio player, podendo assim customizar como quiser o seu layout.
Nesta primeira parte do tutorial, veremos como criar o player e como adicionas alguns controles no filme como: play, stop, pause e reset.
E na segunda parte vamos adicionar controle de volume e a seekbar, que serve para atrasar ou adiantar o filme.

Antes de iniciarmos, visite uma prévia do artigo:

http://www.rafaelcosta.com/Tutoriais/playerVideo/


Vamos ao trabalho:


Obs: Colocarei a tag [code] no início de qualquer código e a tag [/code] no final do mesmo código, para facilitar o entendimento.

Para criar seu player de vídeo, usaremos NetConnection e NetStream. Não é necessário servidor especial para isso.

Começaremos o projeto declarando algumas variáveis que serão necessárias:


[code]
// Largura do Vídeo
var larguraVideo:Number = new Number(320);
// Altura do Vídeo
var alturaVideo:Number = new Number(240);
// Posição X do vídeo
var posicaoX = 0;
// Posição Y do vídeo
var posicaoY = 0;
// Link do vídeo
var urlVideo:String = new String("video.flv");

[/code]

Estas variáveis informam a largura e altura do vídeo, as posições X e Y do vídeo e a url do vídeo.

Feito isso, vamos criar a instância do video e posiciona-lo ao palco.

[code]
// Criando nova instância do vídeo
var video:Video = new Video();
// Adicionando o vídeo ao Palco
addChild(video);
// Posicionando a posição X do vídeo
video.x = posicaoX;
// Posicionando a posição Y do vídeo
video.y = posicaoY;

[/code]

Agora vamos criar a NetConnection para o nosso vídeo

[code]
// Nova instância para NetConnection
var nc:NetConnection = new NetConnection();
// Como não estamos usando um servidor específico, conectaremos a NetConnection a um valor nulo
nc.connect(null);

[/code]

Feito isso, crie a instância para NetStream

[code]
// Novo NetStream, responsável pelo stream do vídeo
var ns:NetStream = new NetStream(nc);

[/code]

E agora colocar o video com Stream

[code]
video.attachNetStream(ns);

[/code]

Executar o vídeo...

[code]
// Caminho para o vídeo
ns.play(urlVideo);

[/code]

Agora crie 4 botões e instancie-os de: iniciar, parar, pausar e resetar.


Aprenderemos como adicionar ações de controle em nossos vídeos.

Todas as ações serão passadas para nosso NetStream, que mandará para o vídeo.


Ações para pausar o vídeo:


[code]

// Adicionar Evento ao botão

pausar.addEventListener(MouseEvent.CLICK, pauseVideo);

// Botão ficar com “mãozinha”

pausar.buttonMode = true;

// Função chamada pelo botão

function pauseVideo(e:MouseEvent):void

{

// Pausar vídeo

ns.pause();

}

[/code]



Ações para executar o vídeo:


[code]

iniciar.addEventListener(MouseEvent.CLICK, resumeVideo);

iniciar.buttonMode = true;

function resumeVideo(e:MouseEvent):void

{

// Retornar vídeo

ns.resume();

}

[/code]



Ações para parar(famoso stop) o vídeo:


[code]

parar.addEventListener(MouseEvent.CLICK, pararVideo);

parar.buttonMode = true;

function pararVideo(e:MouseEvent):void

{

// Retorna o vídeo para 0 segundos

ns.seek(0);

// Pausa o vídeo

ns.pause();

}

[/code]



Ações para retornar o vídeo a 0segundos, sem parar.


[code]

resetar.addEventListener(MouseEvent.CLICK, resetarVideo);

resetar.buttonMode = true;

function resetarVideo(e:MouseEvent):void

{

// Retornar vídeo à 0 segundos

ns.seek(0);

}

[/code]



Abaixo o código completo:


[code]

// Largura do Vídeo

var larguraVideo:Number = new Number(320);

// Altura do Vídeo

var alturaVideo:Number = new Number(240);

// Posição X do vídeo

var posicaoX = 0;

// Posição Y do vídeo

var posicaoY = 0;

// Link do vídeo

var urlVideo:String = new String("video.flv");

// Criando nova instância do vídeo

var video:Video = new Video();

// Adicionando o vídeo ao Palco

addChild(video);

// Posicionando a posição X do vídeo

video.x = posicaoX;

// Posicionando a posição Y do vídeo

video.y = posicaoY;

// Nova instância para NetConnection

var nc:NetConnection = new NetConnection();

// Como não estamos usando um servidor específico, conectaremos a NetConnection a um valor nulo

nc.connect(null);

// Novo NetStream, responsável pelo stream do vídeo

var ns:NetStream = new NetStream(nc);

video.attachNetStream(ns);

// Caminho para o vídeo

ns.play(urlVideo);

// Adicionar Evento ao botão

pausar.addEventListener(MouseEvent.CLICK, pauseVideo);

// Botão ficar com “mãozinha”

pausar.buttonMode = true;

// Função chamada pelo botão

function pauseVideo(e:MouseEvent):void

{

// Pausar vídeo

ns.pause();

}

iniciar.addEventListener(MouseEvent.CLICK, resumeVideo);

iniciar.buttonMode = true;

function resumeVideo(e:MouseEvent):void

{

// Retornar vídeo

ns.resume();

}

parar.addEventListener(MouseEvent.CLICK, pararVideo);

parar.buttonMode = true;

function pararVideo(e:MouseEvent):void

{

// Retorna o vídeo para 0 segundos

ns.seek(0);

// Pausa o vídeo

ns.pause();

}

resetar.addEventListener(MouseEvent.CLICK, resetarVideo);

resetar.buttonMode = true;

function resetarVideo(e:MouseEvent):void

{

// Retornar vídeo à 0 segundos

ns.seek(0);

}

[/code]



Espero que tenha ficado claro como criar seu próprio player de vídeo no Flash usando AS3 e aguarde que na segunda parte vamos personalizar ainda mais nosso player.

Qualquer dúvida poste nos comentários. Abraços a todos!


 

Inclua um comentário sobre o artigo Topo
Elogios e críticas são muito bem vindos, porém o comentário deve ter referência ao artigo em pauta.
O portal e o autor agradecem.
Nome:    
E-mail:      
Comentários:    
Digite a palavra abaixo:  
Para dúvidas técnicas, NÃO UTILIZE ESTE ESPAÇO, utilize nosso fórum de discussão.
http://linhadecodigo.com.br/cs2/forum
 
Comentários sobre o artigo Ver Todos comentários
http://www.linhadecodigo.com.br/Artigo.aspx?id=1758


Abaixo o código completo:




[code]

// Largura do Vídeo

var larguraVideo:Number = new Number(320);

// Altura do Vídeo

var alturaVideo:Number = new Number(240);

// Posição X do vídeo

var posicaoX = 0;

// Posição Y do vídeo

var posicaoY = 0;

// Link do vídeo

var urlVideo:String = new String("video.flv");

// Criando nova instância do vídeo

var video:Video = new Video();

// Adicionando o vídeo ao Palco

addChild(video);

// Posicionando a posição X do vídeo

video.x = posicaoX;

// Posicionando a posição Y do vídeo

video.y = posicaoY;

// Nova instância para NetConnection

var nc:NetConnection = new NetConnection();

// Como não estamos usando um servidor específico, conectaremos a NetConnection a um valor nulo

nc.connect(null);

// Novo NetStream, responsável pelo stream do vídeo

var ns:NetStream = new NetStream(nc);

video.attachNetStream(ns);

// Caminho para o vídeo

ns.play(urlVideo);

// Adicionar Evento ao botão

pausar.addEventListener(MouseEvent.CLICK, pauseVideo);

// Botão ficar com “mãozinha”

pausar.buttonMode = true;

// Função chamada pelo botão

function pauseVideo(e:MouseEvent):void

{

// Pausar vídeo

ns.pause();

}

iniciar.addEventListener(MouseEvent.CLICK, resumeVideo);

iniciar.buttonMode = true;

function resumeVideo(e:MouseEvent):void

{

// Retornar vídeo

ns.resume();

}

parar.addEventListener(MouseEvent.CLICK, pararVideo);

parar.buttonMode = true;

function pararVideo(e:MouseEvent):void

{

// Retorna o vídeo para 0 segundos

ns.seek(0);

// Pausa o vídeo

ns.pause();

}

resetar.addEventListener(MouseEvent.CLICK, resetarVideo);

resetar.buttonMode = true;

function resetarVideo(e:MouseEvent):void

{

// Retornar vídeo à 0 segundos

ns.seek(0);

}

[/code]







Espero que tenha ficado claro como criar seu próprio player de vídeo no Flash usando AS3 e aguarde que na segunda parte vamos personalizar ainda mais nosso player.

Qualquer dúvida poste nos comentários. Abraços a todos
Quem enviou: michellemedeiros2@yahoo.com.br
Postado em: 14/05/2009 00:00:00
Olá Rafael, achei muito interessante o player. E gostaria de pedir uma ajuda, estou desenvolvendo uma animação no flash mx 2004 e gostaria de colocar nela esses controles: play, pause, stop e aquela barrinha que controla o streming, como no youtube. Não tenho muita experiência em actions, mas tu poderia dar uma força? Ficaria muito agradecido!! Pois estou na pressão pra resolver este job.

Obrigado.
Quem enviou: Gustavo
Postado em: 11/05/2009 00:00:00
Olá gostei muito do Artigo
Estou cada dia mais gostanda da linguagem ActionScript
ótimo mesmo.
Quem enviou: Edemiston Reis
Postado em: 02/05/2009 00:00:00
FIZ O PLAYER ACIMA, CRIEI UM DOCUMENTO NOVO AC3. COPIEI O CÓDIGO E RODEI... GEROU 4 ERROS! TODOS OS ERROS SÃO:
==============================================
pausar.buttonMode = true;
iniciar.buttonMode = true;
parar.buttonMode = true;
resetar.buttonMode = true;
==============================================
comentei as 4 linhas acima e rodei... gerou outro erro, mas funcionou!

existe alguma complementação fundamental ainda no código do artigo para total funcionamento?
Quem enviou: Daniel Maffioletti
Postado em: 17/12/2008 00:00:00
Como configuar com tags o tamanho e largura do meu site. Galera sou novato no assunto to criando um site mas to com problemas de largura e tamanho tem como configura tipo <800x600px> algo do tipo?

Agradeço
Quem enviou: Wesley
Postado em: 16/12/2008 00:00:00
Ola Rafael blz..

cara eu tenho um player flv aqui...eu preciso fazer uma playlist com xml para ele.. eu fiz a playlist baseado em um tuto mas fiz com componentes.. eu precisava fazer uma como esta aki brunourai.sites.uol.com.br voce pode ajudar!?

vlw
Quem enviou: Bruno Benato
Postado em: 31/05/2008 00:00:00
Como fazer para o vídeo manter a proporção e não distorcer independente do tamanho da objeto Video que criamos?
Quem enviou: Rafael Dourado
Postado em: 09/05/2008 00:00:00
Não não Adriano. O resetar serve para voltar o filme à 0 segundos, mas sem precisar parar.
Quem enviou: Rafael Costa
Postado em: 23/04/2008 00:00:00
Muito interessante o artigo ,
gostaria de saber se a parte em q você se refere ao reset,
seria o comando para os videos q estão associados ao player ficarem em loop
permante no caso ?
Quem enviou: Adriano Velasco
Postado em: 22/04/2008 00:00:00
Outros artigos do autor Topo
Iniciando em jQuery
Tutorial - Criptografando senhas em PHP
Upload de arquivos em Flash (parte 2)
PHP e MySQL: sistema de paginação
Upload de arquivos em Flash usando a Class FileReference e integração com PHP e MySQL
ActionScript: Conhecendo a class MovieClipLoader
Flash 9: Introdução ao ActionScript 3
Tutorial de Integração Flash + XML - Parte 2
Tutorial de Integração Flash + XML
Artigos relacionados Topo
Trabalhando com a classe DataGrid – Pacote fl.controls
Conhecendo e Trabalhando com os pacotes fl.controls, fl.data e fl.events
POO – Trabalhando com ActionScript File 3.0
Trabalhando com o flash.filters.BevelFilter no AS3
Flex 2.0 - Usando MXML
Flex 2.0 - Criando seu primeiro aplicativo
Flash: Frame ou Slides?
Flash - Controlando impressão pelo ActionScript 2.0
Criando uma calculadora com Macromedia Flex
Comunicação entre dois aplicativos Flex usando uma conexão local na porta 8101
Produtos relacionados Topo
Livro: Adobe Flex 3 Treinamento Direto da Fonte
Livro: ActionScript 3.0 Guia de Referência Rápida
Livro: Curso Profissional Adobe Flash CS3
Livro: Adobe Flex Builder 3.0 - Conceitos e Exemplos
Livro: Coleção Aprenda na Prática - Flash
Livro: Flash MX com ActionScript - IT Educacional
Livro: Flash CS3 - Professional
Livro: Flash CS3 Professional - Criando Além da Animação - para Windows
Livro: Firebird Dicas de Segurança
© Copyright 2001-2010 Codeline Editora, Comércio e Tecnologia Ltda. | Política de privacidade e de uso | Anuncie | Fale conosco

» Site hospedado na Porta 80 Web Hosting «
Nossos números
Dicas: 1.314
Códigos/scripts: 279
Funções de VBScript : 90
Funções JScript : 05
Livros: 1.805
Notícias: 1.942
Artigos: 2.746
Cases: 14
Oportunidades: 4.185
Publicidade

Conheça a loja do Linha de Código.

Microsoft indica Linha de Código.

Assine a Revista Mundo .NET
Portal de Vídeos .NET - os melhores vídeos .NET estão aqui
Baixe o Visual Studio 2010 Beta
Revista Codificando .Net

Siga-nos no Twitter

Linha de Código no Orkut
Fórum de discussão do portal Linha de Código
Feeds
Oportunidades
Notícias
Artigos
Artigos personalizado
       (Por assunto)
Artigos personalizado
       (Por autor)
Portal Vídeos .NET
Portal Vídeos Delphi
LC Blog
       (Onde você faz a notícia)
Promoções
Promoção Mobile (válido somente para pagamento via boleto bancário)
Promoção Mobile (válido somente para pagamento via boleto bancário)
De: R$ 239,00
Por: R$ 146,00
Promoção: Portal de Vídeos .Net + CD Novidades das Linguagens (válido somente para pagamento via boleto bancário)
De: R$ 162,00
Por: R$ 89,00
Promoção VSTS (válido somente para pagamento via boleto bancário)
De: R$ 219,00
Por: R$ 146,00
Promoção Linq To SQL (válido somente para pagamento via boleto bancário)
De: R$ 249,00
Por: R$ 156,00
Promoção ASP.Net com Banco de Dados (válido somente para pagamento via boleto bancário)
De: R$ 249,00
Por: R$ 146,00
CDs
DVD de Treinamento LINQ TO SQL e Entity Framework Avançado
DVD de Treinamento LINQ TO SQL e Entity Framework Avançado
De: R$ 83,00
Por: R$ 73,00
Curso completo de MySQL
Por: R$ 89,00
DVD de Treinamento - ISA Server 2006 - Implementação
De: R$ 83,00
Por: R$ 73,00
CD de Treinamento Adobe Photoshop CS4 Extended – 3D Arte
De: R$ 83,00
Por: R$ 53,00
DVD de Treinamento - Recursos avançados do Windows Mobile 6
De: R$ 83,00
Por: R$ 73,00
Livros
Aprendendo SQL
Aprendendo SQL
Por: R$ 83,00
Web Services SOAP em Java
Novatec
Por: R$ 42,00
Guia Mangá de Bancos de Dados
Novatec
Por: R$ 39,00
Guia Mangá de Estatística
Novatec
Por: R$ 39,00
Guia Mangá de Eletricidade
Novatec
Por: R$ 39,00
E-Books
Manual Completo de Estudos MCSE 70-270 - Instalando, Configurando e Administrando o Windows XP (506 páginas) - Entrega via download
Manual Completo de Estudos MCSE 70-270 - Instalando, Configurando e Administrando o Windows XP (506 páginas) - Entrega via download
Por: R$ 30,00
Manual de Estudos - Exame 70-291 - Windows Server 2003 (606 páginas) - entrega via download
Por: R$ 30,00
Dominando MS – Visio ® em 20 Passos - Melhores Práticas em Gestão de Projetos (entrega via download)
Por: R$ 30,00
MS-Project® 2007 - Melhores Práticas de Gestão de Projetos - Dominando MS – Project ® em 20 Passos (e-book com entrega via download)
Por: R$ 20,00
Banco de dados com C# e Visual Studio .Net 2005 (entrega via download)
Por: R$ 20,00
Os 10+ | Autores do dia
Israel Aéce
Júlio Cesar Fabris Battisti
Alfred Reinold Baudisch
Luiz Felipe de Freitas
Anderson Patricio
Ramon Durães
Robert Martim
Fernando Amaral
Eric C M Oliveira
Marcio Franco
Os 10+ | Artigos do dia
HTML Básico
HTML Avançado
SAP Business One - Implementação e Localização para o Brasil – Overview
PL/SQL - Procedures e Funções
ASP.NET 2.0 - Explorando o GridView
Tutorial de Tabelas Dinâmicas no Excel – Parte 1
PHP: Upload de imagens com segurança
Nota Fiscal Eletrônica - Geração, Assinatura e Transmissão
Criando aplicativos para o Orkut
Instalando Apache + MySQL + PHP 5 no Windows