#

Jump to content

  • Login via Facebook Login com Twitter
  • Cadastre-se no Fórum do BABOO!





 

Foto

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


Minimizar/MaximizarImagens para Papel de Parede

  • Bing - Foto 18
  • Paisagens e animais - 06
  • Spa e relaxamento - 14
  • Animais - 17
  • Paisagem - 23
  • Arte Digital - 50
  • Carros - 46
  • Arte Digital - 26
  • Grunge - 18
  • Dois gatinhos brincando

  • Faça login para responder
Existem 5 respostas neste tópico

#1
Link desta mensagem
T0Z01D3

T0Z01D3
  • Participante
  • 834 mensagens

Publicado 08/jul/05 03:04 h

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:

 Posted Image 1ª Parte - Opções Gerais:
Posted Image

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

 Posted Image 2ª Parte - Cores:
Posted Image

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.

 Posted Image 
3ª Parte - Itens do Menu:
Posted Image

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:

Posted Image Adicionar vídeo (*.swf).

Posted Image 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.

Posted ImageExclui 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 (Posted Image) e você irá se deparar com a seguinte tela:

Posted Image

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

 Posted Image 
1ª Parte - Propriedades Gerais:
Posted Image

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

Posted Image 2ª Parte - Configuração do Tempo:
Posted Image


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:MMPosted ImageS. 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.

 Posted Image 
3ª Parte - Opções do Carregamente do Vídeo:
Posted Image

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.

 Posted Image 
4ª Parte - Finalização:
Posted Image


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.
 Posted Image 
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



Publicidade
Publicidade

#2
Link desta mensagem
Dead Horse

Dead Horse
  • Participante
  • 196 mensagens

Publicado 15/jul/05 09:56 h

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


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


#3
Link desta mensagem
laiseroberto

laiseroberto
  • Participante
  • 61 mensagens

Publicado 21/jul/05 10:52 h

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:

Posted Image

Agora vamos ao que interessa...

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

 Posted Image 1ª Parte - Opções Gerais:
Posted Image

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

 Posted Image 2ª Parte - Cores:
Posted Image

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.

 Posted Image 
3ª Parte - Itens do Menu:
Posted Image

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:

Posted Image Adicionar vídeo (*.swf).

Posted Image 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.

Posted ImageExclui 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 (Posted Image) e você irá se deparar com a seguinte tela:

Posted Image

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

 Posted Image 
1ª Parte - Propriedades Gerais:
Posted Image

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

  Posted Image 2ª Parte - Configuração do Tempo:
Posted Image


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:MMPosted ImageS. 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.

 Posted Image 
3ª Parte - Opções do Carregamente do Vídeo:
Posted Image

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.

 Posted Image 
4ª Parte - Finalização:
Posted Image


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:

 Posted Image 
Flash Optimizer - Reduza arquivos SWF de 60 a 70% sem perder a qualidade.
 Posted Image 
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
Link desta mensagem
T0Z01D3

T0Z01D3
  • Participante
  • 834 mensagens

Publicado 03/set/05 01:32 h

AtualizadoPosted Image

 Posted Image 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. Posted Image
 Posted Image Alterei meu e-mail do MSN se alguém quiser colocar o tutorial em seu site.
 Posted Image 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. Posted Image



#5
Link desta mensagem
LoKoAlUcInAdO

LoKoAlUcInAdO
  • Participante
  • 7 mensagens

Publicado 16/out/07 10:52 h

Resolvido!

Editado por LoKoAlUcInAdO 16/out/07 11:43 h


#6
Link desta mensagem
jpauloivl

jpauloivl
  • Participante
  • 2 mensagens

Publicado 27/jan/08 11:32 h

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


  Publicidade  
Publicidade