Video Player - AS3
Dai pessoal,
Fiquei offline do blog por um tempo, muita correria, como acontece com todos hehe. Mas venho aqui novamente mostrar como se fazer um player de vídeo com netStream.
Não é nada cabuloso de outro mundo. Vamos resolver essa.
Primeiro baixe a classe TweenMax para transições e algumas animaçõeszinhas, dezipe o arquivo na pasta que vai conter o seu fla.
Crie uma pasta contents e dentro dela insira o seu flv com o nome 01.flv.
Agora crie um arquivo novo no flash com 322 x 246, 30 fps, com o nome de videoPlayer.fla . Crie o seu player da forma que achar mais bunito, mas seguindo esses padrões.
1 - Primeiro de tudo crie um MC pai com o instance name de “video_mc”, dentro dele que ficará todo nosso player, isso para facilitar o manuseio depois pra algum projeto.
2 - Botão play e pause = Ficam no mesmo botão, pause no primeiro frame, e play no segundo frame. Instance name de “play_mc”.
3 - Botão stop = Instance name de “stop_mc”.
4 - Botão volume = Um botão para o setar o volume e o mute, primeiro frame dele o volume ok e no segundo o mute. Instance name de “volume_mc”.
5 - Botão SeekDrag = Cuidado aqui, o register point do video_mc tem que ficar exatamente no ponto de início do seekDrag, isso para o cálculo que vamos precisar executar depois. O seu instance name é “dragSeekBar_mc”.
6 - ProgressBar = Mesmo princípio do SeekDrag, seu instance name é “progressBar_mc”. Seu register point tem que ser alinhado a direita.
7 - Aqui já temos o primeiro macetinho, temos que criar uma máscara para fazer o progress “andar”, então crie duas camadas acima da camada do ProgressBar, na primeira use um shape exatamente no mesmo tamanho width do ProgressBar transforme-o em Mc e de o instance name de “maskProgress_mc”. Seu register point tem que ser alinhado a direita.
Na outra camada ponha o progreesBar em outra cor, diferenciando o que rodou e o que tem pra ser rodado, transforme em máscara e feito.
8 - Agora vamos adicionar nosso video source no stage, vá na library, bem em baixo, ao lado da lixeirinha, clique com o botão direito e vá até new Video, como name ponha “player_ns”. Adicione ele no stage, arrastando da library.
9 - E por útlimo o botão play do inicio do player. Uma camada por cima de tudo com o instance name de “startVideo_mc”, e dentro desse mc o botão play com o instance name de “play_mc”.
Ufa, fechamos a parte de layout. Quem disse que é facinho? hehe
Bom, se você seguiu todos os passos acima corretamente, é hora de irmos para o code, que inclusive já está bemmmm comentado, para isso abra um arquivo de actionscript novo e o nomeie de videoPlayer.as
View CodeACTIONSCRIPT | |
package { import flash.display.MovieClip; import flash.events.Event; import flash.net.NetConnection; import flash.net.NetStream; import gs.TweenMax; import gs.easing.*; import flash.events.MouseEvent; import flash.media.SoundTransform; import flash.geom.Rectangle; import flash.display.LoaderInfo; import flash.net.URLLoader; import flash.net.URLRequest; /** * ... * @author Duende * @link http://www.marceloduende.com.br */ public class videoPlayer extends MovieClip { //************************************************************* // // !!!!!!!!!!!!!!!!!!!!!NetStream!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! // //************************************************************* private var Duration:int = 15000; private var actualTime:Number; private var actualLength:Number; private var setVolume:Number = 1; private var rectArea:Rectangle = new Rectangle(0, 107, 186, 0); private var dragTime:Number; private var urlXML:URLRequest = new URLRequest(); private var urlString:String = new String(); private var customClient:Object = {onMetaData:metaDataHandler}; private var st:SoundTransform = new SoundTransform(); private var netConnection:NetConnection = new NetConnection(); private var netStream:NetStream; public function videoPlayer():void { urlString = "contents/01.flv"; netConnection.connect(null); netStream = new NetStream(netConnection); video_mc.player_ns.attachNetStream(netStream); netStream.play(urlString); netStream.pause(); netStream.seek(1); video_mc.play_mc.gotoAndStop(2); netStream.client = customClient; netStream.soundTransform = st; st.volume = 1; video_mc.play_mc.addEventListener(MouseEvent.MOUSE_DOWN, PauseVideo); video_mc.play_mc.buttonMode = true; video_mc.stop_mc.addEventListener(MouseEvent.MOUSE_DOWN, StopVideo); video_mc.stop_mc.buttonMode = true; video_mc.volume_mc.addEventListener(MouseEvent.MOUSE_DOWN, SetVolumeVideo); video_mc.volume_mc.buttonMode = true; video_mc.dragSeekBar_mc.addEventListener(MouseEvent.MOUSE_DOWN, DragSeek); } private function metaDataHandler(infoObject:Object):void { Duration = infoObject.duration; addEventListener(Event.ENTER_FRAME, DragSeekBar); } /** * ... * @usage Play/Pause Video */ private function PauseVideo(e:MouseEvent):void { if (video_mc.play_mc.currentFrame == 1) { video_mc.play_mc.gotoAndStop(2); netStream.pause(); } else { video_mc.play_mc.gotoAndStop(1); netStream.play(urlString); netStream.seek(actualTime); } } /** * ... * @usage Stop Video */ private function StopVideo(e:MouseEvent):void { video_mc.dragSeekBar_mc.removeEventListener(Event.ENTER_FRAME, DragSeekBar); netStream.pause(); netStream.seek(0); video_mc.play_mc.gotoAndStop(2); video_mc.play_mc.addEventListener(MouseEvent.MOUSE_DOWN, PauseVideo); } /** * ... * @usage Set Volume Video */ private function SetVolumeVideo(e:MouseEvent):void { if (video_mc.volume_mc.currentFrame == 1) { addEventListener(Event.ENTER_FRAME, FadeVolume); video_mc.volume_mc.gotoAndStop(2); } else { addEventListener(Event.ENTER_FRAME, FadeVolume); video_mc.volume_mc.gotoAndStop(1); } } private function FadeVolume(e:Event):void { if (video_mc.volume_mc.currentFrame == 2) { setVolume -= 0.1; if (setVolume <= 0) { setVolume = 0; removeEventListener(Event.ENTER_FRAME, FadeVolume); } } else { setVolume += 0.1; if (setVolume >= 1) { setVolume = 1; removeEventListener(Event.ENTER_FRAME, FadeVolume); } } st.volume = setVolume; netStream.soundTransform = st; } /** * ... * @usage Drag Seek Bar */ private function DragSeekBar(e:Event):void { actualTime = netStream.time; video_mc.dragSeekBar_mc.x = actualTime / Duration * video_mc.progressBar_mc.width; video_mc.maskProgress_mc.scaleX = actualTime / Duration; } private function DragSeek(e:MouseEvent):void { netStream.pause(); removeEventListener(Event.ENTER_FRAME, DragSeekBar); addEventListener(MouseEvent.MOUSE_UP, DragSeekOut); e.currentTarget.startDrag(false, rectArea); } private function DragSeekOut(e:MouseEvent):void { video_mc.play_mc.gotoAndStop(1); dragTime = int((video_mc.dragSeekBar_mc.x / video_mc.progressBar_mc.width) * Duration); e.currentTarget.stopDrag(); removeEventListener(MouseEvent.MOUSE_UP, DragSeekOut); addEventListener(Event.ENTER_FRAME, DragSeekBar); netStream.play(urlString); netStream.seek(dragTime); } } } | |
Ok, estamos com tudo em cima, agora é só definir o classPath, no flash na barra properties, insira videoPlayer e o flash vai achar automaticamente sua classe. Agora só compilar e correr pro abraço
Fico perdido? Dessa vez eu libero o fonte, pega aqui
Marcelo Boa Noite…nossa mto bem detalhada essa explicação, eu estou começando no flash agora, só gostaria de entender uma coisa, eu vi que todo o codigo As3 foi salvo em um arquivo a parte do arquivo FLA; como o Flash carrega o codigo AS sendo que ele foi salvo em outro arquivo ?
Desde já agradeço
Att: Vanessa
É só setar no classPath do seu arquivo Flash, nos posts anteriores eu mostrei como deve ser feita essa declaracão.
abs
Marcelo,
adorei sua explicação. Seu player ficou show de bola!
Gostaria de saber como faço para colocar uma variável do tipo ContextMenu para que sejam exibidas informações do tipo: nome do site, copyright etc. Quero que, ao clicar com o botão direito, as pessoas vejam essas informações. Será que tem como aplicar esta variável na AS que você disponibilizou?
Desde já agradeço a atenção
Att: Fabiana
Olá Marcelo!
Utilizei a sua ajuda através do seu blog e construí um video player, porém sem o seekDrag!
Até ai tudo bem, mas agora os meus botões tanto o de play como o de volume não estão a reagir e não consigo perceber porquê… já dei imensas voltas a isto!
Tem alguma ideia?
Obrigado
Maria
Fala Marcelo.
Excelente esse seu tutorial e mais incrivel ainda você disponibilzar o Fla. você ajudeou demais os flasheiros com isso.
Cara eu tenho uma duvida, estou careegando o player que fiz aqui no seu tutorial dentro de um swf que contem meu site, o player como um externo, eu precisaria controlar o stream, no caso quando a pessoa sair da sessão de video preciso parar o stream.
Sabe me dizer como posso fazer isso ?
Obrigado.