Curso Web Design | Como criar um Vídeo Player no Flash
|  |
|
Posted: 09 May 2013 07:40 AM PDT
 Você quer inserir um player de vídeo com controles personalizados em suas páginas da web? Com este tutorial, você poderá criar um no programa Adobe Flash, utilizando um dos recursos que ele possui de melhor: importar vídeos com a extensão FLV, oferecendo excelentes recursos que permitem juntar os vídeos com os controles de som de uma maneira prática e interativa. - Nota do moderador: o post de hoje foi escrito pelo instrutor Elson Lorena, da Microcamp Praia Grande. Você pode conhecer melhor o Elson e entrar em contato com ele no seu perfil do Facebook ou deixando um recado para ele diretamente nos comentários do Blog. Boa leitura! Para criar o player você precisará primeiramente de um vídeo no formato FLV. Se você não possui um, uma boa dica é fazer o download pelo site KeepVid. Nele, você insere a URL do vídeo do Youtube que deseja baixar e escolhe em seguida qual o formato desejado (inclusive a que utilizaremos neste tutorial, a FLV).  Outra dica é baixar um programa como o VDownloader, que realiza a mesma função, isto é, baixar vídeos da internet (se baixar do Youtube, escolha aopção “no Conversion”).  No tutorial eu utilizarei um vídeo da banda Evanescence, que eu curto muito  . Você precisará também de uma imagem para colocarmos no fundo do nosso projeto, como a que utilizei a seguir: Vamos começar? Abra o programa Adobe Flash e crie um novo documento em ActionScript 2.0.  Importe a imagem clicando no menu Arquivo e escolha a opção Importar para o palco. Você poderá ajustar o tamanho da imagem se houver necessidade. Aplique o nome da camada de Fundo.   Agora crie uma nova camada aplique o nome do vídeo. Essa camada deverá ficar em cima da camada fundo.  Nela, iremos importar o vídeo que baixamos. Para isso clique no Menu Arquivo > Importar > Importar Vídeo.  Clique em Procurar e selecione o vídeo a ser importado. Marque também a opção incorporar FLV no SWF e reproduzir na linha do tempo.  Ao clicar em avançar surgirá uma janela chamada Incorporação. No campo Tipo de símbolo deixe a opção Vídeo Incorporado. Marque também as opções expandir linha de tempo.  Agora clique em Avançar e conclua a operação. O vídeo será importado. Precisamos agora aplicar um nome de ocorrência para o vídeo. Selecione o vídeo e nas Propriedades encontraremos um campo chamado Vídeo Incorporado. Digite a palavra "vídeo". Se pressionar Ctrl+Enter você assistirá o vídeo finalizado.  Inserindo botões no playerPara colocar botões de controle para o vídeo, o Flash possui uma biblioteca específica para isso, com muitas opções. Clique no menu Janela, depois Bibliotecas comuns e logo em seguida em Botões. Abra a pasta playback rounded e arraste para a tela botões de Play, Stop, Pause.    Posicione os botões abaixo do vídeo, como se vê na figura a seguir:  Agora precisamos especificar para o Flash qual os comportamentos dos botões para esse vídeo que foi importado. Para isso clique no menu Janela e escolha a opção comportamentos.  Selecione o botão de Play que está no documento e logo em seguida, no painel comportamento, clique no sinal de + e escolha a opção Vídeo incorporado. Observe que aparecerão comandos de Parar, Pausar, Reproduzir. Nessa hora aparecerá uma janela onde perguntará o nome da ocorrência.  Selecione a opção vídeo que é a ocorrência que criamos quando importamos o arquivo. Faça o mesmo para os outros botões obedecendo os seus comportamentos.  Pronto! Agora temos um player completo no Flash. Dê CONTROL + ENTER para visualizar o resultado na janela do programa:  Gostaram? Não esqueçam de postar os seus comentários e contar se conseguiram realizar o tutorial. Escreva para nós sugerindo temas e dando sugestões. Não esqueçam também de curtir e compartilhar com os amigos… o Blog do Web Design agradece!  |
|
Posted: 09 May 2013 07:35 AM PDT
 Se você acompanha o Blog do Web Design da Microcamp-SP, já pôde conferir aqui os efeitos de letra no estilo água, eletricidade entre outros bem interessantes. Hoje, mostraremos como criar uma imagem no Photoshop aplicando o efeito de fogo em um texto, que você poderá utilizar em seus trabalhos! Para conseguir o efeito, iremos seguir uma sequência de filtros logo após criarmos a camada de texto. Portanto, preste bastante atenção ao passo-a-passo para que o resultado saia da maneira correta. Importante: esse tutorial pode ser realizado com qualquer versão recente do Photoshop. 1. Abra um novo documento com as seguintes configurações:
 2. Preencha o fundo da camada com a ferramenta de Preenchimento na cor preta.  3. Escreva seu nome ou a palavra que desejar na fonte Impact (eu a escolhi porque é necessário uma fonte com o corpo bem cheio, de hastes grossas para que o efeito possa ser visto em sua totalidade), na cor branca e tamanho 72 (mas você também pode escolher um tamanho maior ou menor, de acordo com a palavra que escolheu).  4. Pressione as teclas Ctrl + E simultaneamente para que as camadas de Texto e de Fundo sejam mescladas. Logo após mesclá-las, clique no Menu Imagem, na opção Girar tela de pintura, 90° Anti-Horário.  5. Agora vá ao Menu Filtro e escolha o filtro Estilização na opção Vento:
  6. Pressione as teclas Ctrl + F simultaneamente, isso fará com que o efeito do Filtro seja repetido na imagem. Depois, vá novamente ao Menu Imagem, escolha Girar tela de pintura, 90° Grau Horário para devolver a imagem ao seu estado normal.   7. Agora retorne ao Menu Filtro, escolha Estilização e clique na opção Difusão, no modo Normal e dê OK.    8. De novo no Menu Filtro, escolha o filtro Desfoque e clique na opção Desfoque Gaussiano, com Raio de 2,0.   9. Mais uma vez no Menu Filtro, escolha o filtro Distorção e clique em Vidro, colocando as seguintes opções:
 O resultado ficará parecido com esse:  10. Estamos quase terminando. Mais uma vez no Menu Filtro, vá em Distorção, e escolha Ondulação, com os seguintes valores:
  11. Chegou a hora de modificar a coloração do nosso projeto. Vá ao Menu Imagem, na opção Modo e clique em Tons de Cinza.  Você verá uma mensagem sobre descartar as cores do original. Pode descartar tranquilamente.  12. Novamente em Imagem, e de novo na opção Modo, clique em Cores Indexadas.  13. Por ultimo vá novamente ao Menu Imagem, Modo, e clique em Tabela de Cores. Uma janela irá abrir e nela iremos escolher a opção chamada Corpo Preto.   14. Ao final, do tutorial, o seu texto deverá ficar como este:  Você poderá utilizá-lo em capas para o Facebook, ou até em montagens pessoais que esteja fazendo. Esse tutorial também serve como uma excelente introdução aos Filtros e suas funções. Treine bastante, tente outras opções e misturas, somente com bastante prática você poderá criar efeitos bonitos e fascinantes para os seus trabalhos! Espero que tenham gostado, não se esqueçam de deixar seu comentário sobre o tutorial, dê o seu Curtir ou compartilhe com os amigos nas Redes Sociais e… até o próximo post!  |
| You are subscribed to email updates from Blog do Curso Web Design - Microcamp SP To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
Nenhum comentário:
Postar um comentário
Os comentários são muito bem vindos e importantes, pois enriquecem o conteúdo dos artigos.