Tutorial 2
Animações no Silverlight com o Expression Blend
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.
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
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
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.
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.
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.
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” …
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();
}
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.
