Publicado por: euchuma | 15 outubro 2007

Tutorial 3 – Contruindo um vídeo player no Silverlight com o Expression Blend

Tutorial 3 – Contruindo um vídeo player no Silverlight com o Expression Blend

Download completo do exemplo

1- Abra o Microsoft Expression Blend e crie um novo projeto com a opção Silverlight Application (JavaScript) e dê o nome testVideoPlayer

2- Selecione a ferramenta Rectangle no Toolbox e contrua um retângulo de 125px de largura por 35px de altura e arredonde os cantos. Selecione a ferramenta TextBlock e insira um texto “Play”. Selecione o retângulo e o texto e agrupe-os clicando com o botão direito do mouse e selecionando a opção Group into -> Canvas. Renomeie o grupo criado para btPlay.

tutorial3_1.jpg
Figura: Botão btPlay

3- Repita o passo 2 e crie um botão agrupado com o nome btStop e outro botão agrupado com o nome btPause

tutorial3_2.jpg
Figura: Botões btPlay, btStop e btPause

4- Copiar o filme “wmv para a pasta do projeto que criamos (geralmente localizada em Meus Documentos -> Expression -> Expression Blend Projects).  Ir na aba Project e selecionar testVideoPlayer, clicar com botão direito e selecionar Add Existing Item e selecionar o video copiado na pasta do projeto.

tutorial3_3.jpg
Figura: Adicionando o vídeo ao projeto

5- Clique 2 vezes sobre o vídeo adicionado na aba Project para adicionar o vídeo no Canvas. Renomeie o vídeo para testVideo. Redimensione e posicione o vídeo de acordo com sua preferência.

tutorial3_4.jpg
Figura: Vídeo adicionado ao projeto

6- Mudar para a opção XAML no painel Canvas e acrescentar o atributo AutoPlay=”False” para o vídeo:

<MediaElement x:Name=”testVideo” AutoPlay=”False” …

7- Ainda no XAML adicionar o evento MouseLeftButtonDown=”ButtonMouseClick” nos três botões:

<Canvas x:Name=”btPlay” MouseLeftButtonDown=”ButtonMouseClick” …
<Canvas x:Name=”btStop” MouseLeftButtonDown=”ButtonMouseClick” …
<Canvas x:Name=”btPause” MouseLeftButtonDown=”ButtonMouseClick” …

8- Na aba Project clique 2 vezes sobre o arquivo Page.xaml.js (ele será aberto no Bloco de Notas) e acrescente o código no final do código já existente:

function ButtonMouseClick(sender, eventArgs)
{
 if(sender.name==”btPlay”)
 {
  sender.findName(“testVideo”).play();

 } else if(sender.name==”btStop”)
  {
   sender.findName(“testVideo”).stop();

  } else if(sender.name==”btPause”)
   {
    sender.findName(“testVideo”).pause();

   }
}

9- Salve o arquivo Page.xaml.js aberto no Bloco de Notas e feche-o.

10 – No Expression Blend dê um Save All.

11- Teste o projeto com F5 e clique no botão Play para iniciar o vídeo. Clique também sobre os botões Stop e Pause e veja o resultado.

tutorial3_5.jpg
Figura: Projeto sendo executado


Responses

  1. Bom Dia Euclides, estou pesquisando sobre silverlight…
    Bom tenho uma duvida e gostaria muito que pudesse me ajudar…
    Estaum dizendo que o Silverlight eh uma altenativa ao Flash da Adobe, com o flash eu precisava saber programar em ActionScript para criar experiencias mais interativa na web…

    E pelo que eu estou vendo com o Silverlight eu preciso saber javacript, xaml, e VB ou C sharp…

    se puder me responder ..ficaria muito grato…
    aki mesmo ou com um email

  2. Olá Diego,
    Com certeza o Silverlight é o maior concorrente do Flash.
    Em relação as linguagens de programação, o Silverlight é mais flexível que o Flash, pois você pode programá-lo com JavaScript, C# ou VB.Net
    O XAML é uma linguagem utilizada para descrever os elementos visuais e não é necessário conhece-lo, pois você pode utilizar o Expression Blend e desenhar os elementos com as ferramentas visuais que o código XAML vai sendo criado automaticamente.
    Espero que tenha ajudado.
    Abraço

  3. Euclides,
    Gostaria de saber ou se você vai fazer algum tutorial neste sentido, de como receber os filmes atravez do um banco de dados.
    Ou seja o player recebe algo de algum banco, andei vendo e me parece que tem que se fazer via webservice..
    Você tem ideia de algum material a respeito ou se você pretende fazer algum tutorial?
    abraços
    Deus Abençoe

  4. Olá..
    gostei muito dos tutoriais, porém não pude colocar em pratica, devida as opções descritas neles não correspondem ao meu blend.
    Como fazer para aparecer os Silverlight Java e os outros itens???
    O que aparece aqui é somento o Silverlight Site, alguma dica??

  5. Olá André,

    Você tem que utilizao o Expression Blend 2. Dá uma olhada no novo tópico que coloquei no Blog:

    https://euclideschuma.wordpress.com/2008/02/11/instalando-os-programas-utilizados-nos-tutoriais/

    Abraço

  6. Como vai…
    eu estou utilizando o Blend 2… fiz o download esse mês, porém ainda não consigo abrir.


Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Categorias

%d blogueiros gostam disto: