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
|
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
