• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

Tjda

[Duvida] Como guardar video e skin de controlos num só ficheiro

43 mensagens neste tópico

Eu estou a tentar criar um ficheiro .SWF com um vídeo e gostava que esse vídeo tivesse controlos para parar de reproduzir ou aumentar o volume, mas era necessário que gravasse um ficheiro .SWF, pois quando tento gravar grava sempre com um ficheiro extra para os controlos "SkinOverPlayStopSeekMuteVol.SWF"

A duvida é a seguinte, existe alguma forma de fazer save com apenas um ficheiro SWF ex:nome.SWF sem o "SkinOverPlayStopSeekMuteVol.SWF", mas qu e tenha na mesma os controlos ?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Se adicionares os controles à Library do teu FLA, só um SWF é gerado.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

pois, mas como é que eu faço para ligar os controles que estão da library ao video, pois ele continua a ir buscar o ficheiro que está de fora

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ah, estás a usar o Componente que vem com o Flash. Só agora reparei por causa do nome do swf. As minhas desculpas.

Esta é uma das razões porque não gosto de utilizar os componentes do Flash. Existem outras. Esta não é a mais importante. Prefiro criar os meus próprios componentes exactamente porque fico com o controle total sobre eles - o que inclue a decisão de que ficheiros extra são criados, se existe essa necessidade, e onde.

Infelizmente, a resposta é pelo que sei, não podes fazer nada. Mesmo se criares o teu próprio skin, terá que ser feito de acordo com o Object Model do componente em causa. No caso do FLVPlayback, isso é um ficheiro à parte. A vantagem, no entanto é que também podes alterar o skin em runtime de uma forma fácil (verdade seja dita).

É possível que existe algum truque para fazer o que tu queres. Eu infelizmente desconheço-o... e tenho dúvidas que exista. Esperemos que outros membros vejam esta thread e tenham uma solução :D

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

brigado pela resposta, tive tentar colocar o vídeo via embed, sem a skin, mas ocorre um problema, o som adianta-se em demasia à imagem, isso dá para resolver ?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ui! Isso é mais complicado...

Computador lento por acaso?

A forma como o Flash funciona obriga-te a tomar alguns cuidados com o formato do video a adoptar para visualização. Precisaria de saber mais coisas. Algumas coisas a ter em nota:

- O framerate do teu SWF não é compatível com o framerate do video? Tenta alterar o framerate do teu FLA para um valor igual ou um factor do framerate do video. Por exemplo, se o video está a 60fps, altera o teu FLA para 1, 2, 3, 5, 6, 10, 15, 20, 30 ou 60 fps. Pode também ser para cima, como 120 fps, ou 180 (exagerado eu sei, apenas para exemplo).

- O video tem muita qualidade ou é muito grande e está a consumir a tua RAM e/ou o processador. Comprime o video para FLV formato, e já agora, certifica-te que usas o modelo de compressão Sorenson.

- O actual codec usado pelo video não é compativel com o Flash que estás a usar. Nada  fazer. É raro, mas há por aí uns codecs esquisitos. Se possível converte o video.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

problema do pc não é eu corro o vídeo normalmente sem ser no flash, vou ver os frames ...

o que é o modelo Sorenson? , onde posso ver isso ? o vídeo está em FLV tal como retirei do youtube

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Se está em FLV, não tens mais com que te preocupar. Verifica apenas o FPS e usa um skin por enquanto para poderes controlar o playback e melhor verificares o problema.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Era problema dos frames, já enquadrei o som com o vídeo, muito obrigado

Sabe se há alguma forma de adicionar um botão de parar no vídeo em embed ?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ok. Vamos lá então. Parece muito, mas não te preocupes. É fácil.

Para criares o teu próprio Video Player em Flash

Passo 1 - Class VideoLoader, prepara o video para playback e desenha-o no ecran

Cria um novo ficheiro .as com um editor de texto ou através do menu File->New e ActionScript File. Copia o código em baixo e grava como VideoLoader.as no mesmo directório do teu FLA.

package {
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.display.SimpleButton;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.geom.Rectangle;
import flash.text.TextField;

public class VideoLoader extends MovieClip {

	private var ficheiro:String;
	private var conteudo:VideoContents;
	private var loaderStop:LoaderStop;
	private var loaderPause:LoaderPause;
	private var loaderPlay:LoaderPlay;

	public function VideoLoader(f:String, w:uint, h:uint, linha:Number, fundo:Number) {

		ficheiro = f;

		graphics.lineStyle(0, linha);
		graphics.beginFill(fundo);
		graphics.drawRect(0, 0, w + 16, h + 16);
		graphics.endFill();

		conteudo = new VideoContents(f, w, h);
		this.addChild(conteudo);
		conteudo.x = 8;
		conteudo.y = 8;

		loaderPause = new LoaderPause();
		loaderStop = new LoaderStop();
		loaderPlay = new LoaderPlay();
		this.addChild(loaderPause);
		this.addChild(loaderStop);
		this.addChild(loaderPlay);
		loaderPause.x = (w + 16) / 2 - 6; loaderPause.y = h + 24;
		loaderStop.x = loaderPause.x - 30; loaderStop.y = loaderPause.y;
		loaderPlay.x = loaderPause.x + 30; loaderPlay.y = loaderPause.y;

		loaderPause.addEventListener(MouseEvent.CLICK, PauseIt);
		loaderStop.addEventListener(MouseEvent.CLICK, StopIt);
		loaderPlay.addEventListener(MouseEvent.CLICK, PlayIt);

	}

	private function PauseIt(evt:MouseEvent):void {
		conteudo.pauseIt();
	}

	private function StopIt(evt:MouseEvent):void {
		conteudo.stopIt();
	}

	private function PlayIt(evt:MouseEvent):void {
		conteudo.playIt();
	}

}
}

Passo 2 - Class VideoContents, carrega o video, faz stream e controla o playback

Cria um novo ficheiro .as com um editor de texto ou através do menu File->New e ActionScript File. Copia o código em baixo e grava como VideoContents.as no mesmo directório do teu FLA.

package {

import flash.display.MovieClip;
import flash.events.NetStatusEvent;
import flash.media.Video;
import flash.net.NetConnection;
import flash.net.NetStream;

public class VideoContents extends MovieClip {

	private var ficheiro:String;
	private var ncVideoPlayer:NetConnection;
	private var nsVideoPlayer:NetStream;
	private var vid:Video;
	private var objMetadata:Object;
	private var progresso:ProgressShape;
	private var isPaused:Boolean;
	private var isPlaying:Boolean;
	private var isOver_:Boolean;

	public function VideoContents(file:String, w:uint, h:uint) {

		ficheiro = file;

		ncVideoPlayer = new NetConnection();
		ncVideoPlayer.connect(null);
		nsVideoPlayer = new NetStream(ncVideoPlayer);
		nsVideoPlayer.bufferTime = 10;
		nsVideoPlayer.addEventListener(NetStatusEvent.NET_STATUS, onNewStatus);

		objMetadata = new Object();
		objMetadata.onMetadata = mHandler;
		nsVideoPlayer.client = objMetadata;

		vid = new Video();
		vid.attachNetStream(nsVideoPlayer);
		vid.width = w;
		vid.height = h;


		this.addChild(vid);
		progresso = new ProgressShape();
		this.addChild(progresso);
		progresso.x = this.width / 2 - progresso.width / 2;
		progresso.y = this.height / 2 - progresso.height / 2;
		progresso.visible = true;

		nsVideoPlayer.play(ficheiro);

		isPaused = false;
		isPlaying = true;
		isOver_ = false;

	}

	private function mHandler(obj:Object):void {}

	private function onNewStatus(evt:NetStatusEvent):void {
		if (evt.info.code == "NetStream.Play.Stop") {
			isOver_ = true;
		}

		if (evt.info.code == "NetStream.Buffer.Empty") {
			progresso.visible = true;
		}

		if (evt.info.code == "NetStream.Buffer.Full") {
			progresso.visible = false;
		}

	}

	public function get isOver() { return isOver_; }

	public function close():void {
		nsVideoPlayer.close();
		ncVideoPlayer.close();
		vid.clear();
	}

	public function pauseIt():void {

		if(isPlaying = false) return;

		nsVideoPlayer.pause();
		isPaused = true;

	}

	public function stopIt():void {

		nsVideoPlayer.seek(0);
		nsVideoPlayer.pause();
		isPlaying = false;

		if (isPaused) isPaused = false;

	}

	public function playIt():void {

		if (isPaused) {
			nsVideoPlayer.resume();
			isPaused = false;
			return;
		}

		if (!isPlaying) {
			nsVideoPlayer.resume();
			isPlaying = true;
		}

	}

}
}

Passo 3 - Cria os teus controles

O que vamos fazer a seguir é criar os símbolos para fazer o Stop, Pause e Play do video, bem como o simbolo que indicará que o video está a fazer o stream. Para simplificar a coisa, eu já te os criei. Mas podes criar os teus mesmos se souberes como criar símbolos (neste caso serão Buttons, excepto o simbolo de stream que é um MovieClip) e como exporta-los para ActionScript.

1. Faz os download do FLA com estes símbolos que criei já para ti, aqui.

2. No teu FLA, escolhe a opção de Menu File->Import->Open External Library.

3. Navega para onde fizeste o download do FLA com os símbolos e selecciona-o. Clica em Open.

4. Na janela com a library externa que te aparece, arrasta os 4 símbolos para a tua Library. Podes fechar a janela com os símbolos externos e apagar o FLA externo. Já não precisas dele.

Passo 4 - Cria as classes que vão identificar os símbolos.

Os símbolos já estavam criados para serem exportados para ActionScript. Uma vez que vão ser usados pela class VideoContents, é preciso fazê-lo. Se clicares com o botão do rato direito num dos símbolos e escolheres Linkage no menu que aparece, verificarás que a opção "Export for ActionScript" está seleccionada e o campo Class contém o nome do símbolo. Ora o que falta é só criar essas classes.

1. Cria um novo ficheiro .as com um editor de texto ou através do menu File->New e ActionScript File. Copia o código em baixo e grava como LoaderStop.as no mesmo directório do teu FLA.

package {

import flash.display.SimpleButton;

public class LoaderStop extends SimpleButton {

	public function LoaderStop() {

	}

}
}

2. Faz o mesmo para os restantes símbolos, tendo a certeza que usas o nome de ficheiro LoaderPause.as, LoaderPlay.as e ProgressShape.as e alteras o nome da Class para LoaderPause, LoaderPlay e ProgressShape, respectivamente. Tens também de alterar o nome da função para que seja igual ao nome da class.

Este passo poderia eventualmente ser simplificado. Mas eu sinceramente prefiro assim. Mais tarde ou mais cedo poderei querer criar código dentro destas classes, pelo que já estão individualizadas. Por outro lado, esta é a forma correcta de fazer as coisas. Todas as linguagens têm as suas pequenas idiossincrasias. Esta é uma delas. Adiante...

Podes querer alterar os meus símbolos. Força! Redesenha-os, ou cria os teus próprios. O importante é que cada símbolo seja exportado para ActionScript e as respectivas classes com aqueles nomes sejam criadas.

Passo 5 - Fim.

E pronto. Pouco mais à a dizer... Como fazer o load do video?

No teu fla, vai para a frame onde queres colocar o video, e cria o seguinte ActionScript

var obj:VideoLoader;

obj = new VideoLoader("video.flv", 352, 288, 0x666633, 0x000000);

addChild(obj);

- O primeiro argumento é o nome do ficheiro de video (juntamente com a path relativa se ele não estiver no mesmo directório do swf)

- O segundo e terceiro argumentos são, respectivamente, a largura e altura do video. Podes usar valores diferentes da source. Ele redimensionará o video para o que puseres aqui.

- O terceiro e quarto argumentos são a cor da linha e a cor do fundo que queres para a caixa onde o video aparece.

Após o addChild(), podes colocar o video no stage onde quiseres. Basta só alterar as propriedades x e y do obj.

Conclusão

Tens aqui um video player básico que faz stream do video, permite parar, fazer pausa e continuar o playback.

O código foi feito à pressa, mas funciona. Penso que não terás problemas. Algumas variáveis estão em Inglês, mas é assim que eu programo. O que vês em português foi eu que traduzi de propósito porque quando estou a mostrar código a um português parece-me mal ter tudo em inglês. Pancada minha talvez. Não ligues.

Qualquer duvida em relação ao código, já sabes; é só perguntar. Posso te explicar como funciona e porquê. Mas preferia discutir apenas os pontos onde possas ter dúvidas.

A vantagem de fazer as coisas assim, em vez de programares no timeline do teu FLA é que agora tens um sistema que podes usar em qualquer outro FLA. Tens também todo o código centrado em uns poucos ficheiros em vez de estar espalhado pelo teu timeline ou no timline dos teus símbolos.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

brigado pela resposta, tipo fiz tal e qual como disse agora falta ligar o que fiz à pagina com o vídeo e isso já não sei fazer ... O Fla da pagina ta aqui tem os botões tds, agora gostava de saber como liga-los ao vídeo

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

hmmm... a ideia era não colocar o video dentro do FLA. Isso é uma péssima idea a não ser que o SWF resultante não seja para usar na web. É o caso?

Porque com o video dentro do FLA, o SWF resultante vai ser muito grande e o utilizador vai ter que esperar que o download total seja feito antes de ver qualquer coisa. Neste momento o teu FLA já vai em 28 MB!

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

é para a net, mas o SWF não tem mais de que 5 MB, mas se houver outra forma diga, mas o que eu estou a fazer é uma página para uma revista em page-flip e a única forma que eu consegui colocar o vídeo a aparecer na revista foi com o embed tal como está

edit: se bem que tds as revistas que vejo com vídeos são para fazer download, mas como até agora as revistas que o site lançou nenhuma tinha vídeo não havia essa necessidade e eram tds online, mas se conseguir colocar vídeo talvez passe para offline

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Mas o código que te mostrei acima não vai funcionar com o filme embutido no SWF. O filme terá que estar à parte e no passo 5, dizes onde substituindo o texto "video.flv"

EDIT: Acabei de fazer o download a já vi o FLV. Retira os controles do video. Eles só precisam de estar na Library. Se precisares de os mover para um sitio especifico altera o código seguinte na class VideoLoader:

loaderPause.x = (w + 16) / 2 - 6; loaderPause.y = h + 24;
loaderStop.x = loaderPause.x - 30; loaderStop.y = loaderPause.y;
loaderPlay.x = loaderPause.x + 30; loaderPlay.y = loaderPause.y;

se por exemplo queres que eles apareçam alinhados com o lado esquerdo do video... é isso que me parece que queres, altera para:

loaderStop.x = 0; loaderStop.y = h + 24;
loaderPause.x = 30; loaderPause.y = h + 24;
loaderPlay.x = 60; loaderPlay.y = h + 24;

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

sim eu fiz isso, só não sei agora como adicionar o que fiz no passo 5 à pagina sem o vídeo neste caso

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

1. Retira o video da Library.

2. Retira os controles Stop, Pause e Play do stage. Deixa-os na Library.

3. Se reparares a "Layer 2" está agora a branco. Usa essa layer para incluires o código.

    3.1 Seleciona a layer

    3.2 Selecciona a opção de Menu Window -> Actions, ou simplesmente pressiona F9 no teu teclado.

    3.3 Copia o código em baixo para a janela que se abre. Não te esqueças de alterar "video.flv" para a localização e nome do teu video.

    3.4 Grava o FLA e fecha a janela de código. Testa.

var obj:VideoLoader;

obj = new VideoLoader("video.flv", 300, 200, 0x186672, 0xEAEFF5);

addChild(obj);

obj.x = 23;
obj.y = 172;

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
GeSHi (actionscript):
var obj:VideoLoader;

obj = new VideoLoader("1.flv", 352, 288, 0x666633, 0x000000);

addChild(obj);
Created by GeSHI 1.0.7.20

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ok. De acordo com o teu código o ficheiro 1.flv tem de estar no mesmo directório do ficheiro SWF.

E vais ter de passar os dois para o webserver.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Então qualquer outra coisa falhou nos passos anteriores. É que eu testei o teu fla e funcionou.

Crias-te todos os ficheiros .as? Estão no mesmo folder do FLA? Eu preferia que fosses tu a fazer em vez de te enviar o trabalhinho todo feito :D Mas se me responderes que sim, não vou ter outro remédio.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora