Criando painel para o Flash – JSFL (Flash JavaScript).

Iaeww pessoal !!

Hoje vamos falar um pouco sobre JSFL ( Flash JavaScript ).

Imagine que você tem 100 arquivos no formato .FLV em vários diretórios e tem que escolher 10 vídeos para seu site.

Vai dar trabalho ein ????

Como seria bom se o flash tivesse um painel pra visualizar .FLV não era ?

Pois é …

já que não tem nós iremos criar um novo painel usando JSFL.

FLV Player

vamos nessa …

Primeiro criaremos um novo arquivo chamado FLV Player.fla com as dimensões 220 x 320 e 5 camadas com os seguintes nomes: AS – BUSCA , AS – PLAYER , BUSCA , PLAYER, LISTA

agora na camada BUSCA no frame 1 colocaremos um botão que iniciará a busca de arquivos e
colocaremos seu nome de instância de buscar_btn.

feito isso iremos para o frame 2 da camada PLAYER onde utilizaremos o componente MediaPlayback com nome de instância: player

Ainda no frame 2 na camada LISTA colocaremos um componente List e outro Button com os respectivos nomes de instância: videos_list, voltar_btn.

tranqüilo até aí??

vamos agora para a parte boa !!!

Action Script :

No frame 1 da camada AS – BUSCA colocaremos o código para iniciar a pesquisa nos seus arquivos.

stop(); /* pára a timeline. */

Stage.align = ‘TL’; /* alinha o swf no canto superio esquedo da janela.*/

/* Atribui uma função ao evento onRelease do botão instanciado como buscar_btn */

buscar_btn.onRelease = function(){

/* Passaremos uma function como string para ser executada no SWF com o comando MMExecute */

var code = “function retornaDiretorio(){ “;
code += ” var arquivoChoose = fl.browseForFileURL( \”select\”, \”Escolha o arquivo\” );”;
code += ” return arquivoChoose;”;
code += “}; “;
code += ” retornaDiretorio(); “;

var fileURL = MMExecute(code);
/* este comando só funciona quando um painel em SWF é carregado na IDE do flash*/

var arrcaminho = fileURL.split(“/”);
var arquivo = arrcaminho.pop();
_global.CAMINHO = arrcaminho.join(“/”)+”/”;

/* tratando a string do caminho do arquivo selecionado para pegar o caminho do diretório. */

if (CAMINHO.length>2) {
gotoAndStop(2);
/* Se existir um caminho vai para o frame 2 */
}

}

agora selecione o frame 2 da camada AS – PLAYER e insira o código abaixo na janela actions.

Stage.scaleMode=”noScale”; /* não deixa escalar o layout */

var code = “FLfile.listFolder(\”" + CAMINHO + “*.flv\”, \”files\” )”;
var arquivos = MMExecute(code);
arquivosArray = arquivos.split(“,”);
/* Usei o método FLfile.listFolder para pegar todos os arquivos .FLV do diretório e coloquei em um array */

videos_list.dataProvider = arquivosArray ;
/* populei o componente List com o array de vídeos encontrados */

var obj= new Object();
obj.change = function(){
/* O evento change acontece quando você seleciona um vídeo da lista*/
MMExecute(‘fl.trace(“‘ + videos_list.selectedItem + ‘”);’);
/* Dispara um trace na janela output com nome do vídeo*/

campo.text=String(videos_list.selectedItem).substr(0, String(videos_list.selectedItem).length-4 );
player.setMedia(CAMINHO+videos_list.selectedItem ,”FLV”);
player.play(0);
/* inicia novo vídeo */
}

obj.complete = function(){
videos_list.selectedIndex = videos_list.selectedIndex+1
MMExecute(‘fl.trace(“completou”);’);
obj.change();
/* Disparar o evento change para iniciar o próximo vídeo quando terminar o atual */
}

/* adicionei os ouvintes de evento para os componentes */
player.addEventListener(“complete”, obj)
videos_list.addEventListener(“change”,obj)
videos_list.selectedIndex =0
obj.change()
/* Disparei o 1º vídeo da lista */

/* O botão voltar pára o componente MediaPlayback e move o filme para o frame 1 onde você poderá pesquisar em outro diretório*/

voltar_btn.onRelease = function(){

player.stop()
gotoAndStop(1);

}

pronto!!!

se você acompanhou direito sua estruturas de camadas deverá estar assim:

certinho????

Continuando…

para utilizar um SWF como painel do flash você terá que colocar o arquivo dentro do diretório

C:\Documents and Settings\{USUÁRIO}\Configurações locais\Dados de aplicativos\Macromedia\Flash 8\en\Configuration\WindowSWF\

e reiniciar o flash.

Para abrir seu painel vá no menu do flash em WINDOW –> OTHER PANELS –> FLV Player.

Uma boa prática é criar um instalador (.MXP) e utilizar o Macromedia Extension Manager para instalar e desinstalar o painel.

vamos criar um instalador agora.

Abra um bloco de notas e salve como FLV Player.mxi e insira o XML padrão abaixo.

<?xml version=”1.0″ encoding=”UTF-8″?>
<macromedia-extension name=”FLV Player.xmi” version=”1.0″ type=”component” requires-restart=”true”>

<!– Describe the author –>

<author name=”Rodrigo Carneiro” />

<!– List the required/compatible products –>

<products>
<product name=”Flash” version=”7″ primary=”true” />
</products>

<!– Describe the extension –>

<description>
<![CDATA[Painel FLV Player: usado para reproduzir videos no formato FLV em seu Flash.]]>
</description>

<!– Describe where the extension shows in the UI of the product –>

<ui-access>
<![CDATA[Windows > OtherPanels > FLV Player]]>
</ui-access>

<!– Describe the files that comprise the extension –>

<files>
<file name=”FLV Player.swf” destination=”$flash/WindowSWF” />
</files>

</macromedia-extension>

OK ?

coloque na mesma pasta o arquivo que você acabou de criar e o FLV Player.swf

clique no arquivo .MXI para o Macromedia Extension Manager cria o instalador que se chamará FLV Player.mxp

Download dos arquivos

UFA !!!

é isso aí
pode distribuir seu Painel para seus amigos eu até vende-lo quem sabe

OBS: Como o componente já tem um botão de maximizar você ainda poderá aumentar a tela

X:o)

Com alguns poucos ajustes você poderá transformar seu painal em um mp3 player também já que o componente é preparado para isso.

espero que tenham gostado e até o próximo tutorial .

abraço,

TeORiA

Autor: Rodrigo Carneiro – Colunista de Flash do MXSTUDIO

Adobe Certified Professional
Adobe User Group Leader
Flash User Group Pernambuco
www.FUGPE.com.br

Site: www.RodrigoCarneiro.com