Publicado por: euchuma | 19 setembro 2007

Tutorial 2 – Animações no Silverlight com o Expression Blend

Tutorial 2

Animações no Silverlight com o Expression Blend

Download completo do projeto

1- Abra o Microsoft Expression Blend e vá no menu File -> New Project, irá aparecer uma janela onde você poderá escolher vários tipos de projetos. Escolha a opção Silverlight Application (JavaScript) e dê o nome test_animation.

silver3_1.jpg
Figura: Criando novo projeto no Expression Blend

2- Selecione a ferramenta Rectangle no Toolbox e contrua um retângulo de 125 x 125. 

3- Ir na aba Properties e alterar o preenchimento do retângulo criado para Gradient de vermelho para amarelo e retirar o fio de contorno.

4- Mudar o nome para rectangleAnimation clicando com o botão direito do mouse sobre o objeto [Rectangle] no painel Objects and Timeline e escolhendo a opção Rename

silver3_2.jpg
Figura: Construindo o retângulo

5- Criar um novo Storyboard clicando sobre o botão “>” no painel Objects and Timeline, depois em “+” e dar o nome de animationBox e selecionar a opção Create as a Resource

silver3_3.jpg
Figura: Criando Storyboard

6- Irá aparecer um contorno vermelho e a informação “Timeline recording is on“. Com a linha amarela da timeline na posição 0 clique no botão Record Keyframe. Mova a linha amarela até a posição 2 e clique novamente no botão Record Keyframe. E finalmente mova a linha amarela até a posição 1 e clique novamente no botão Record Keyframe.

silver3_4.jpg
Figura: Criando keyframes

7- Agora com a linha amarela na posição 1 selecione o keyframe criado da posição 1 e mova o retângulo para baixo e no centro. Em seguida mova a linha amarela até a posição 2, selecione o keyframe da posição 2 e mova o retângulo até o lado superior direito.

silver3_5.jpg
Figura: Realizando a animação

8- Clique sobre o círculo vermelho no canto superior esquerdo do Canvas e desabilite a gravação de animação.

9- Agora vamos inserir um objeto que servirá como botão para disparar a animação. Selecione a ferramenta Ellipse no Toolbox (fica junto com o Rectangle) e crie uma circunferência com fundo verde e dê o nome de buttonStart.

silver3_6.jpg
Figura: Criando o buttonStart

10- Mudar para a opção XAML no painel Canvas e acrescentar os eventos MouseLeftButtonDown:

<Ellipse x:Name=”buttonStart” MouseLeftButtonDown=”ButtonMouseClick”

silver3_7.jpg
Figura: Código XAML com o evento MouseLeftButtonDown

11- Na aba Project abrir o Page.xaml.js e acrescentar a função abaixo. O Page.xaml.js será aberto no bloco de notas.

function ButtonMouseClick(sender, eventArgs)
  { 
  sender.findName(“animationBox”).begin();
}

silver3_8.jpg
Figura: Editando o Page.xaml.js

9- Salvar o arquivo Page.xaml.js

10- Executar com F5 (menu Project -> Test Project).

Clique no círculo verde e veja que a animação é realizada.

silver3_91.jpg
Figura: Testando o exemplo construído


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: