Jump to content



Foto

Tutorial: Como criar um PLAYER DE FLASH (*.swf) com Menu!



Existem 5 respostas neste tópico

#1 T0Z01D3    

T0Z01D3
  • Participante
  • 834 mensagens

Publicado 08 July 2005 - 03:04 PM

Antes de copiar este tutorial e colocá-lo em seu site, veja o que está escrito no fim do tutorial!







Olhem este Player de Flash com menu e tudo: Clique aqui para visualizar o Exemplo!
Gostaria de ter um igual no seu Site?? Pois é Fácil! Basta seguir este tutorial e saiba como fazer o seu!

Programa necessário:
Camtasia Studio



Instale-o e abra o Camtasia Theater (Programa que acompanha o Camtasia Studio) e você irá se deparar com esse tela:



Agora vamos ao que interessa...

Vamos estudar cada parte dessa tela para ficar igual ao meu Exemplo a cima:

 http://www.babooforu...ilies/30.gif 1ª Parte - Opções Gerais:
http://www.babooforum.com.br/idealbb/files/37674-camtasiatheater8-7-2005-14.13.48.gif

Nesta parte da tela, se escolhe as propriedades Gerais (Visuais) do Player e do Menu.

Menu Title: Título do Menu (Que no caso do Emplo acima está se Chama "Tutorial").
Menu title font size: Tamanho da Fonte do Título do Menu (No exemplo a cima é 14).
Menu item font size: Tamanho da Fonte de cada item do Menu (No exemplo é 12).
Menu Alignment: Deseja que o Menu fique à esquerda ou à direita do Vídeo? Left = Esquerda e Right = Direita (No exemplo está na Esquerda).
Play movies in sequence: Se ativado, vai rodando os vídeos na sequência que eles estão no Menu. Assim que acaba de exibir um, ele começa o outro (No Exemplo, está ativado).

 http://www.babooforu...smilies/30.gif 2ª Parte - Cores:
http://www.babooforu...05-14.20.26.gif

Nesta parte, escolhe-se as cores de tudo que será exibido. As cores padrões são boas, mas se você quiser personalizar, esteje a vontade.

Movie background: É a cor do fundo do filme, caso ele não preencha a tela toda [Se sobrar espaços para cima, para baixo ou para um dos lados].
Menu background: Fundo do Menu. OBS: Lembre-se de colocar uma cor que os itens fiquem legíveis nesse fundo.
Menu title: Título do Menu. Mesma observação que o item anterior.
Item Normal: Cor dos Itens do Menu, sem estar com o mouse em cima. Também siga a mesma observação anterior.
Item rollover: Cor dos Itens do Menu quando o Ponteiro do Mouse está em cima do Item.

 http://www.babooforu...smilies/30.gif 
3ª Parte - Itens do Menu:
http://www.babooforum.com.br/idealbb/files/37674-camtasiatheater8-7-2005-14.28.16.gif

Aqui você irá escolher os itens ou vídeos (lembre-se, sempre arquivos *.swf) que ficaram no Menu, para serem exibidos na parte do Vídeo quando clicados.

Coluna Menu item name: Nome que irá ser exibido no Menu. Duplo-Clique para editar.
Coluna Menu item file: Caminho completo para o arquivo no SEU computador.

Agora vamos aos botões:

http://www.babooforu...5.gif Adicionar vídeo (*.swf).

http://www.babooforu....32.16.gif Move o item selecionado na Tabela ao lado Direto para cima ou para baixo. Deixe na ordem que você deseja que apareça no Menu.

http://www.babooforu...33.22.gifExclui o item selecionado na tabela à direita.

OBS: O Double-click entries to edit significa Duplo-Clique para editar os itens.



Agora escolha a guia Controls (http://www.babooforu...05-14.35.20.gif) e você irá se deparar com a seguinte tela:

http://www.babooforu...05-14.36.28.gif

Esta Parte serve para Configurar o "Controle" do Vídeo. Controle são os botões de Play, Stop, Pause, etc...

 http://www.babooforu...smilies/30.gif 
1ª Parte - Propriedades Gerais:
http://www.babooforum.com.br/idealbb/files/37674-camtasiatheater8-7-2005-14.38.32.gif

Aqui iremos apenas configurar 2 opções, mas que são muito importantes.

Paused at start: Define se o filme só será exibido depois que o botão Play for clicado (Ativado), ou se irá rodar os filmes direto, sem precisar apertar o Play (Desativado).
Movie controller color: Escolhe a cor dos Botões de controle. Eu prefiro a cor padrão, que conbina com o resto da tela, mas se você quizer trocar, basclicar no botão e escolher a cor...
Show About Box: Mostra uma "caixa" de texto, com um informações. Digite ali o que deseja que seja visto nessa "caixa de texto". (Máximo de 8 linhas).

http://www.babooforu...ilies/30.gif 2ª Parte - Configuração do Tempo:
http://www.babooforu...05-14.45.22.gif


Aqui iremos ajustar a parte onde é mostrado o tempo decorrido ou o tempo que falta:

Display format: Formato de exibição do Tempo. Eu aconselho HH:MMhttp://www.babooforum.com.br/idealbb/images/smilies/14.gifS. Lembrando H = Horas, M = Minutos, S = Segundos.
Show elapsed time: Se ativado, mostra o tempo decorrido.
Show duration: Se ativado, mostra a duração do vídeo (*.sfw).

Font: Escolhe o Estilo de Fonte que será usado para exibir o Tempo. Arial é a melhor na minha opnião.
Font Color: Escolhe a Cor da Fonte. Lembre-se colocar algo de acordo com as cores escolhidas acima.

 http://www.babooforu...smilies/30.gif 
3ª Parte - Opções do Carregamente do Vídeo:
http://www.babooforu...05-14.49.21.gif

Nesta tela, configuramos o "Loading", que é a parte de Carregamento do Vídeo.

Show loading movie: Se ativado, mostra o vídeo sendo carregado.
Match movie size: Ele mostra carregando de acordo com o tamanho do vídeo *.swf (Completamente Recomendado).
Loadinf movie URL: Escolhe o arquivo SWF que irá exibir o vídeo carregando. Se você não tiver nenhuma, deixe a padrão que está boa.
% of main movie to preload: Porcentagem mínima do arquivo SWF que terá que ter sido baixada para que o vídeo SWF começe a ser exibido.
Minumum preload movie display time: É como a opção acima, mas aqui você escolhe por quanto TEMPO deve ter sido baixado... Essas 2 opções trabalham em conjunto.

 http://www.babooforu...smilies/30.gif 
4ª Parte - Finalização:
http://www.babooforu...05-14.54.45.gif


Clique em Export Flash Menu, escolha aonde quer que ele seja salvo, e pronto!
Ele irá criar vários arquivos dentro de uma pasta. Para visualizar o Player, é só abrir o que tem o nome que você deu ao Player com extensão HTML. Exemplo: nome_do_menu.html

Pronto, seu Player está FEITO!





Alguns Programas Úteis:

Flash Optimizer - Reduza arquivos SWF de 60 a 70% sem perder a qualidade.
 http://www.babooforu...smilies/54.gif 
Magic Swf2Avi - Converte animações em Flash para AVI.
 



Deseja colocar este tutorial em seu site? Leia abaixo!
Fale comigo pelo MSN:
rinaldo90@gmail! Não irei pedir nada em troca não, apenas para colocar a Fonte, o Autor e o Fórum do Babaoo! E para eu saber em quais sites ele está também! Mas por favor, fale comigo antes de colocá-lo em seu site!
 



Autor: T0Z01D3
Direitos Autorais: T0Z01D3



#2 Dead Horse    

Dead Horse
  • Participante
  • 196 mensagens

Publicado 15 July 2005 - 09:56 AM

Parabéns cara!!! Tutorial muito bom!!!


O Camtasia Studio é muito bom mesmo, ainda mais para fazer tutoriais em vídeo.


#3 laiseroberto    

laiseroberto
  • Participante
  • 61 mensagens

Publicado 21 July 2005 - 10:52 AM

Data: 8/7/2005
Autor:T0Z01D3


Antes de copiar este tutorial e colocá-lo em seu site, veja o que está escrito no fim do tutorial!







Olhem este Player de Flash com menu e tudo: Clique Aqui Para Abrir O Exemplo
Gostaria de ter um igual no seu Site?? Pois é Fácil! Basta seguir este tutorial e saiba como fazer o seu!

Programa necessário:
Camtasia Studio



Instale-o e abra o Camtasia Theater (Programa que acompanha o Camtasia Studio) e você irá se deparar com esse tela:

http://www.babooforu...05-14.09.33.gif

Agora vamos ao que interessa...

Vamos estudar cada parte dessa tela para ficar igual ao meu Exemplo a cima:

 http://www.babooforu.../30.gif 1ª Parte - Opções Gerais:
http://www.babooforum.com.br/idealbb/files/37674-camtasiatheater8-7-2005-14.13.48.gif

Nesta parte da tela, se escolhe as propriedades Gerais (Visuais) do Player e do Menu.

Menu Title: Título do Menu (Que no caso do Emplo acima está se Chama ''Tutorial'').
Menu title font size: Tamanho da Fonte do Título do Menu (No exemplo a cima é 14).
Menu item font size: Tamanho da Fonte de cada item do Menu (No exemplo é 12).
Menu Alignment: Deseja que o Menu fique à esquerda ou à direita do Vídeo? Left = Esquerda e Right = Direita (No exemplo está na Esquerda).
Play movies in sequence: Se ativado, vai rodando os vídeos na sequência que eles estão no Menu. Assim que acaba de exibir um, ele começa o outro (No Exemplo, está ativado).

 http://www.babooforu...es/30.gif 2ª Parte - Cores:
http://www.babooforu...05-14.20.26.gif

Nesta parte, escolhe-se as cores de tudo que será exibido. As cores padrões são boas, mas se você quiser personalizar, esteje a vontade.

Movie background: É a cor do fundo do filme, caso ele não preencha a tela toda [Se sobrar espaços para cima, para baixo ou para um dos lados].
Menu background: Fundo do Menu. OBS: Lembre-se de colocar uma cor que os itens fiquem legíveis nesse fundo.
Menu title: Título do Menu. Mesma observação que o item anterior.
Item Normal: Cor dos Itens do Menu, sem estar com o mouse em cima. Também siga a mesma observação anterior.
Item rollover: Cor dos Itens do Menu quando o Ponteiro do Mouse está em cima do Item.

 http://www.babooforu...es/30.gif 
3ª Parte - Itens do Menu:
http://www.babooforum.com.br/idealbb/files/37674-camtasiatheater8-7-2005-14.28.16.gif

Aqui você irá escolher os itens ou vídeos (lembre-se, sempre arquivos *.swf) que ficaram no Menu, para serem exibidos na parte do Vídeo quando clicados.

Coluna Menu item name: Nome que irá ser exibido no Menu. Duplo-Clique para editar.
Coluna Menu item file: Caminho completo para o arquivo no SEU computador.

Agora vamos aos botões:

http://www.babooforu... Adicionar vídeo (*.swf).

http://www.babooforu...6.gif Move o item selecionado na Tabela ao lado Direto para cima ou para baixo. Deixe na ordem que você deseja que apareça no Menu.

http://www.babooforu...33.22.gifExclui o item selecionado na tabela à direita.

OBS: O Double-click entries to edit significa Duplo-Clique para editar os itens.



Agora escolha a guia Controls (http://www.babooforu...05-14.35.20.gif) e você irá se deparar com a seguinte tela:

http://www.babooforu...05-14.36.28.gif

Esta Parte serve para Configurar o ''Controle'' do Vídeo. Controle são os botões de Play, Stop, Pause, etc...

 http://www.babooforu...es/30.gif 
1ª Parte - Propriedades Gerais:
http://www.babooforum.com.br/idealbb/files/37674-camtasiatheater8-7-2005-14.38.32.gif

Aqui iremos apenas configurar 2 opções, mas que são muito importantes.

Paused at start: Define se o filme só será exibido depois que o botão Play for clicado (Ativado), ou se irá rodar os filmes direto, sem precisar apertar o Play (Desativado).
Movie controller color: Escolhe a cor dos Botões de controle. Eu prefiro a cor padrão, que conbina com o resto da tela, mas se você quizer trocar, basclicar no botão e escolher a cor...
Show About Box: Mostra uma ''caixa'' de texto, com um informações. Digite ali o que deseja que seja visto nessa ''caixa de texto''. (Máximo de 8 linhas).

  http://www.babooforu.../30.gif 2ª Parte - Configuração do Tempo:
http://www.babooforu...05-14.45.22.gif


Aqui iremos ajustar a parte onde é mostrado o tempo decorrido ou o tempo que falta:

Display format: Formato de exibição do Tempo. Eu aconselho HH:MMhttp://www.babooforum.com.br/idealbb/images/smilies/14.gifS. Lembrando H = Horas, M = Minutos, S = Segundos.
Show elapsed time: Se ativado, mostra o tempo decorrido.
Show duration: Se ativado, mostra a duração do vídeo (*.sfw).

Font: Escolhe o Estilo de Fonte que será usado para exibir o Tempo. Arial é a melhor na minha opnião.
Font Color: Escolhe a Cor da Fonte. Lembre-se colocar algo de acordo com as cores escolhidas acima.

 http://www.babooforu...es/30.gif 
3ª Parte - Opções do Carregamente do Vídeo:
http://www.babooforu...05-14.49.21.gif

Nesta tela, configuramos o ''Loading'', que é a parte de Carregamento do Vídeo.

Show loading movie: Se ativado, mostra o vídeo sendo carregado.
Match movie size: Ele mostra carregando de acordo com o tamanho do vídeo *.swf (Completamente Recomendado).
Loadinf movie URL: Escolhe o arquivo SWF que irá exibir o vídeo carregando. Se você não tiver nenhuma, deixe a padrão que está boa.
% of main movie to preload: Porcentagem mínima do arquivo SWF que terá que ter sido baixada para que o vídeo SWF começe a ser exibido.
Minumum preload movie display time: É como a opção acima, mas aqui você escolhe por quanto TEMPO deve ter sido baixado... Essas 2 opções trabalham em conjunto.

 http://www.babooforu...es/30.gif 
4ª Parte - Finalização:
http://www.babooforu...05-14.54.45.gif


Clique em Export Flash Menu, escolha aonde quer que ele seja salvo, e pronto!
Ele irá criar vários arquivos dentro de uma pasta. Para visualizar o Player, é só abrir o que tem o nome que você deu ao Player com extensão HTML. Exemplo: nome_do_menu.html

Pronto, seu Player está FEITO!





Alguns Programas Úteis:

 http://www.babooforu...es/54.gif 
Flash Optimizer - Reduza arquivos SWF de 60 a 70% sem perder a qualidade.
 http://www.babooforu...es/54.gif 
Magic Swf2Avi - Converte animações em Flash para AVI.
 



Deseja colocar este tutorial em seu site? Leia abaixo!
Fale comigo pelo MSN: naldinho90@hotmail.com! Não irei pedir nada em troca não, apenas para colocar a Fonte, o Autor e o Fórum do Baboo! E para eu saber em quais sites ele está também! Mas por favor, fale comigo antes de colocá-lo em seu site!
 






Autor: T0Z01D3
Direitos Autorais: T0Z01D3

Valeu colega, mas exatamente como disse, realmente a voz não sai totalmente , sempre fica um som baixo no fundo.Mas legal valeu, pela colaboração um abraço.

#4 T0Z01D3    

T0Z01D3
  • Participante
  • 834 mensagens

Publicado 03 September 2005 - 01:32 PM

Atualizadohttp://www.babooforu...s/smilies/4.gif

 http://www.babooforu.../56.gif Corrigi o Link do exemplo, porém agora tem só uma Screenshot. Se alguém souber uma hospedagem grátis que tenha FTP que eu possa fazer um UPLOAD de exemplo, me diga por favor. http://www.babooforu...s/smilies/2.gif
 http://www.babooforu.../56.gif Alterei meu e-mail do MSN se alguém quiser colocar o tutorial em seu site.
 http://www.babooforu...milies/54.gif O Programa pode estar com algumas mudanças (Mas se estiver, serão muito poucas mesmo), pois o tutorial é da versão 2.0 do Camtasia, e que agora já está na 3.01, mas visualmente ele está praticamente a mesma coisa. http://www.babooforu...s/smilies/9.gif



#5 LoKoAlUcInAdO    

LoKoAlUcInAdO
  • Participante
  • 7 mensagens

Publicado 16 October 2007 - 10:52 AM

Resolvido!

Editado por LoKoAlUcInAdO 16 October 2007 - 11:43 AM


#6 jpauloivl    

jpauloivl
  • Participante
  • 2 mensagens

Publicado 27 January 2008 - 11:32 AM

Gostaria de saber se esse programinha também serve p fazer proteção de tela. Pois usei o Swiff Saver 2.2, mais fica aparecendo a propaganda do fabricante do progama embaixo.

Ou se vcs não têm um q posso usar q não aparesse a propaganga. Aumenos por uns dias.
Obrigado. www.fotopatos.com.br. e-mail jpauloivl@hotmail.com