Em Física, Cinemática é o ramo responsável por estudar o movimento dos corpos. Cinemática Inversa (IK) é uma tecnica muito utilizada em engenharia, robotica e animação. Consiste no movimento de um objeto ou de um conjunto de objetos em relação a outros objetos, usando uma estrutura articulada de bones. Os bones permitem a movimentação de forma complexa e natural permitindo criar animação de personagens, como braços, pernas e expressões faciais com muito mais facilidade, a imagem mais simples para ilustra isso é do movimento de uma alavanca. Quem já trabalha com softwares de modelagem 3D como o 3D Studio MAX já conhece essa tecnica. A partir do Adobe Flash CS4, temos a possibilidade de se trabalhar com cinemática inversa na própria IDE do Flash e uma biblioteca em ActionScript 3.0.

Cinemática inversa (IK) é um método de animação que consiste no movimento de um objeto ou de um conjunto de objetos em relação a outros objetos, usando uma estrutura articulada de bones. Os bones permitem a movimentação de forma complexa e natural permitindo criar animação de personagens, como braços, pernas e expressões faciais com muito mais facilidade, a imagem mais simples para ilustra isso é do movimento de uma alavanca.

Agora vamos ver um exemplo utilizando o Adobe Flash Professional CS5, será bem simples para entender o funcionamento dessa ferramenta.

• Crie um novo arquivo do tipo ActionScript 3.0
• Crie três simbolos graficos em forma retangular para que o efeito seja melhor visualizado. Deixe-os lado a lado formando uma fileira.
• Selecione a ferramenta Bone
• Clique na estremidade do primeiro simbolo e arraste ate o final dele. Será formado um bone com uma estremidade maior sendo a base.
• Faça a mesma coisa com o segundo simbolo de modo que comece arrastando a partir da estremidade menor do bone do primeiro simbolo.
• Seu stage deve ser parecido com isto:
  

  IK Adobe Flash

• Note que foi criado uma nova camada com o nome de Armature. Selecione por exemplo o frame 20, clique com o botão direito sobre o frame e selecione “Insert Pose”. Feito isso, movimente de alguma forma os simbolos no stage. Faça a mesma coisa para o frame 40 e 60.
• Agora teste o filme “Ctrl+Enter”.

DOWNLOAD SOURCE

Para saber mais:
http://help.adobe.com/pt_BR/flash/cs/using/WS58BD3A02-DA25-488f-B534-AE5463A24833.html

Livros recomendados:
Adobe Flash CS4 Professional Como Fazer 100 Técnicas Essenciais

A utilização de efeitos no Flex é um dos grandes pedidos da comunidade. O uso moderado de efeitos pode tornar a sua aplicação mais bonita e funcional, só não abuse porque o usuário do sistema vai cansar de ver tanto componente girando na tela

Uma notícia não muito boa do Flex 4 é que não podemos mais utilizar as propriedades MoveEffect, ResizeEffect.. entre outros no Flex 4, devendo atribuir cada efeito diretamente na declaração do documento mxml. Isso significa que toda a descrição de um efeito deve estar contida na tag fx:Declarations.

Efeito Move

Este efeito é responsável em mover componentes na tela. Uma simples aplicação para ela é, por exemplo, uma tela de login:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
		   xmlns:s="library://ns.adobe.com/flex/spark"
		   xmlns:mx="library://ns.adobe.com/flex/mx"
		   minWidth="955" minHeight="600">

	<fx:Declarations>
		<s:Move id="MoveDown" target="{login}"
				yFrom="-200" yTo="200"/>
		<s:Move id="MoveUp" target="{login}"
				yFrom="200" yTo="-200"/>
	</fx:Declarations>

	<s:creationComplete>
		<![CDATA[
			MoveDown.play();
		]]>
	</s:creationComplete>

	<s:Panel id="login" title="Login"
			 width="200" height="150"
			 x="300"
			 >
		<s:Button label="ok" x="50" y="50">
			<s:click>
				<![CDATA[
					MoveUp.play();
				]]>
			</s:click>
		</s:Button>
	</s:Panel>

</s:Application>

Neste simples exemplo, criamos dois efeitos chamados de MoveDown e MoveUp. O efeito Move possui as propriedades yTo e yFrom, que descrevem a animação do efeito de mover, da coordenada y de origem e da coordenada y de destino. O mesmo vale para xFrom e xTo. Outra propriedade é o target, que informa o alvo em que o efeito será realizado. Neste caso o target é o panel criado.

Para realizarmos o efeito, usamos o método play(). Ele é feito no creationComplete da aplicação e no click do botão.

Aplicando bounce

Bom, o efeito acima é muito simples, e possivelmente você não gostou dele. Você quer dar mais “efeito ao efeito” e para isso existem os efeitos do tipo bounce. Esta técnica aplica um efeito de “mola” no componente, e é ativado através do efeito s:Bounce do Flex 4.  Veja:

<fx:Declarations>
	<s:Bounce id="bounceEasing"/>
	<s:Move id="MoveDown" target="{login}"
			yFrom="-200" yTo="200"
			easer="{bounceEasing}"
			duration="2000"
			/>
	<s:Move id="MoveUp" target="{login}"
			yFrom="200" yTo="-200"
			/>
</fx:Declarations>

Neste exemplo, criamos o efeito Bounce e aplicamos ele no efeito MoveDown, através da propriedade easer. Utilizamos também a propriedade duration para definir a duração do movimento, em milissegundos.

Aplicando efeitos simultâneos

Podemos aplicar efeitos ao mesmo tempo em um componente através da tag Parallel (Paralelo). O Exemplo a seguir ilustra como combinar o efeito de Fade (aparecer) com o Move:

<s:Parallel id="MoveDown" target="{login}">
	<s:Move
		yFrom="-200" yTo="200"
		easer="{bounceEasing}"
		duration="2000"
			/>
	<s:Fade alphaFrom="0" alphaTo="1"
		duration="2000"
		/>
</s:Parallel>

Neste exemplo, criamos a tag s:Parallel e já definimos o seu target. Inserimos então os efeitos Move e Fade. O Fade possui duas propriedades novas, alphaFrom e alphoTo. Alpha é o valor da transparência sendo que o valor 0 é totalmente transparente e o valor 1 é totalmente opaco.

Aplicando Targets dinâmicos

Nos exemplos exibidos, sempre relacionamos o efeito ao componente. Ou seja, todos os efeitos faziam uma referência ao componente. Em determinados momentos, precisamos criar componentes dinâmicos no Flex, e para que possamos aplicar efeitos nestes componentes, precisamos definir um target dinâmico também. O método play que foi usado nos exemplos anteriores possui um parâmetro que aceita um array de componentes, que pode ser usado da seguinte forma:

NomeDoEfeito.play([componente1,componente2]);

O exemplo a seguir mostra este processo:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
		   xmlns:s="library://ns.adobe.com/flex/spark"
		   xmlns:mx="library://ns.adobe.com/flex/mx"
		   minWidth="955" minHeight="600">

<fx:Declarations>
	<s:Bounce id="bounceEasing"/>

	<s:Parallel id="MoveDown">
		<s:Move
			yFrom="-100" yTo="400"
			easer="{bounceEasing}"
			duration="2000"
			/>
		<s:Fade alphaFrom="0" alphaTo="1"
				duration="1000"
				/>
	</s:Parallel>

	<s:Fade id="Sumir" alphaFrom="1" alphaTo="0"
			duration="500"
			/>

</fx:Declarations>

<fx:Script>
	<![CDATA[
		import mx.collections.ArrayList;

		import mx.events.EffectEvent;
		private function OnClick(e:MouseEvent):void
		{
			Sumir.play([e.target as Button]);
		}
	]]>
</fx:Script>

<s:Button label="Criar">
	<s:click>
		<![CDATA[

		var b:Button = new Button();
		b.x = Math.round(Math.random() * 600);
		b.label = b.x.toString();
		b.y = -100;

		b.addEventListener(MouseEvent.CLICK,OnClick);

		this.addElement(b);
		MoveDown.play([b]);

		]]>
	</s:click>
</s:Button>

</s:Application>

Neste exemplo, criamos botões dinâmicos que caem na tela. Ao clicar no botão, aplicamos um efeito de Fade para que tenhamos a sensação de que ele sumiu da tela, apesar dele continuar lá. Veja que usamos três efeitos agora, o primeiro é contido no Parallel (2 efeitos então) e o terceiro é um Fade para sumir o botão.

Ao clicar no botão “Criar”, criamos dinamicamente um botão e definimos o valor da coordenada x como um número randômico até 600. A coordenada y é –100, pois ainda vamos aplicar o efeito de movimento nele. Também adicionamos um listener no click do botão, executando o método OnClick. Este método irá executar o efeito de Fade.

Como os efeitos são realizados em componentes dinâmicos, temos que passá-lo como parâmetro do método play. Como este parâmetro é sempre um array, usamos os colchetes para simular um array com um elemento.

Atenção: Este exemplo serve apenas para ilustrar o processo. Veja que mesmo sumindo com os botões através do efeito fade, eles continuam lá, na memória.

No próximo artigo iremos falar mais sobre efeitos. A idéia é aplicar os efeitos em coisas úteis, ao invés de ficar mostrando como cada efeito funciona sem nenhum uso apropriado. Idéias pessoal??

A utilização de efeitos no Flex é um dos grandes pedidos da comunidade. O uso moderado de efeitos pode tornar a sua aplicação mais bonita e funcional, só não abuse porque o usuário do sistema vai cansar de ver tanto componente girando na tela

Uma notícia não muito boa do Flex 4 é que não podemos mais utilizar as propriedades MoveEffect, ResizeEffect.. entre outros no Flex 4, devendo atribuir cada efeito diretamente na declaração do documento mxml. Isso significa que toda a descrição de um efeito deve estar contida na tag fx:Declarations.

Efeito Move

Este efeito é responsável em mover componentes na tela. Uma simples aplicação para ela é, por exemplo, uma tela de login:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
		   xmlns:s="library://ns.adobe.com/flex/spark"
		   xmlns:mx="library://ns.adobe.com/flex/mx"
		   minWidth="955" minHeight="600">

	<fx:Declarations>
		<s:Move id="MoveDown" target="{login}"
				yFrom="-200" yTo="200"/>
		<s:Move id="MoveUp" target="{login}"
				yFrom="200" yTo="-200"/>
	</fx:Declarations>

	<s:creationComplete>
		<![CDATA[
			MoveDown.play();
		]]>
	</s:creationComplete>

	<s:Panel id="login" title="Login"
			 width="200" height="150"
			 x="300"
			 >
		<s:Button label="ok" x="50" y="50">
			<s:click>
				<![CDATA[
					MoveUp.play();
				]]>
			</s:click>
		</s:Button>
	</s:Panel>

</s:Application>

Neste simples exemplo, criamos dois efeitos chamados de MoveDown e MoveUp. O efeito Move possui as propriedades yTo e yFrom, que descrevem a animação do efeito de mover, da coordenada y de origem e da coordenada y de destino. O mesmo vale para xFrom e xTo. Outra propriedade é o target, que informa o alvo em que o efeito será realizado. Neste caso o target é o panel criado.

Para realizarmos o efeito, usamos o método play(). Ele é feito no creationComplete da aplicação e no click do botão.

Aplicando bounce

Bom, o efeito acima é muito simples, e possivelmente você não gostou dele. Você quer dar mais “efeito ao efeito” e para isso existem os efeitos do tipo bounce. Esta técnica aplica um efeito de “mola” no componente, e é ativado através do efeito s:Bounce do Flex 4.  Veja:

<fx:Declarations>
	<s:Bounce id="bounceEasing"/>
	<s:Move id="MoveDown" target="{login}"
			yFrom="-200" yTo="200"
			easer="{bounceEasing}"
			duration="2000"
			/>
	<s:Move id="MoveUp" target="{login}"
			yFrom="200" yTo="-200"
			/>
</fx:Declarations>

Neste exemplo, criamos o efeito Bounce e aplicamos ele no efeito MoveDown, através da propriedade easer. Utilizamos também a propriedade duration para definir a duração do movimento, em milissegundos.

Aplicando efeitos simultâneos

Podemos aplicar efeitos ao mesmo tempo em um componente através da tag Parallel (Paralelo). O Exemplo a seguir ilustra como combinar o efeito de Fade (aparecer) com o Move:

<s:Parallel id="MoveDown" target="{login}">
	<s:Move
		yFrom="-200" yTo="200"
		easer="{bounceEasing}"
		duration="2000"
			/>
	<s:Fade alphaFrom="0" alphaTo="1"
		duration="2000"
		/>
</s:Parallel>

Neste exemplo, criamos a tag s:Parallel e já definimos o seu target. Inserimos então os efeitos Move e Fade. O Fade possui duas propriedades novas, alphaFrom e alphoTo. Alpha é o valor da transparência sendo que o valor 0 é totalmente transparente e o valor 1 é totalmente opaco.

Aplicando Targets dinâmicos

Nos exemplos exibidos, sempre relacionamos o efeito ao componente. Ou seja, todos os efeitos faziam uma referência ao componente. Em determinados momentos, precisamos criar componentes dinâmicos no Flex, e para que possamos aplicar efeitos nestes componentes, precisamos definir um target dinâmico também. O método play que foi usado nos exemplos anteriores possui um parâmetro que aceita um array de componentes, que pode ser usado da seguinte forma:

NomeDoEfeito.play([componente1,componente2]);

O exemplo a seguir mostra este processo:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
		   xmlns:s="library://ns.adobe.com/flex/spark"
		   xmlns:mx="library://ns.adobe.com/flex/mx"
		   minWidth="955" minHeight="600">

<fx:Declarations>
	<s:Bounce id="bounceEasing"/>

	<s:Parallel id="MoveDown">
		<s:Move
			yFrom="-100" yTo="400"
			easer="{bounceEasing}"
			duration="2000"
			/>
		<s:Fade alphaFrom="0" alphaTo="1"
				duration="1000"
				/>
	</s:Parallel>

	<s:Fade id="Sumir" alphaFrom="1" alphaTo="0"
			duration="500"
			/>

</fx:Declarations>

<fx:Script>
	<![CDATA[
		import mx.collections.ArrayList;

		import mx.events.EffectEvent;
		private function OnClick(e:MouseEvent):void
		{
			Sumir.play([e.target as Button]);
		}
	]]>
</fx:Script>

<s:Button label="Criar">
	<s:click>
		<![CDATA[

		var b:Button = new Button();
		b.x = Math.round(Math.random() * 600);
		b.label = b.x.toString();
		b.y = -100;

		b.addEventListener(MouseEvent.CLICK,OnClick);

		this.addElement(b);
		MoveDown.play([b]);

		]]>
	</s:click>
</s:Button>

</s:Application>

Neste exemplo, criamos botões dinâmicos que caem na tela. Ao clicar no botão, aplicamos um efeito de Fade para que tenhamos a sensação de que ele sumiu da tela, apesar dele continuar lá. Veja que usamos três efeitos agora, o primeiro é contido no Parallel (2 efeitos então) e o terceiro é um Fade para sumir o botão.

Ao clicar no botão “Criar”, criamos dinamicamente um botão e definimos o valor da coordenada x como um número randômico até 600. A coordenada y é –100, pois ainda vamos aplicar o efeito de movimento nele. Também adicionamos um listener no click do botão, executando o método OnClick. Este método irá executar o efeito de Fade.

Como os efeitos são realizados em componentes dinâmicos, temos que passá-lo como parâmetro do método play. Como este parâmetro é sempre um array, usamos os colchetes para simular um array com um elemento.

Atenção: Este exemplo serve apenas para ilustrar o processo. Veja que mesmo sumindo com os botões através do efeito fade, eles continuam lá, na memória.

No próximo artigo iremos falar mais sobre efeitos. A idéia é aplicar os efeitos em coisas úteis, ao invés de ficar mostrando como cada efeito funciona sem nenhum uso apropriado. Idéias pessoal??

Silverlight e GPU Acceleration

Você sabe quando usar?

A partir da versão Silverlight 3 é possível habilitar a aceleração de hardware. A ativação permite otimizar os recursos de hardware. Se você tiver um processador poderoso, multi-core, eu recomendo limitar o número de núcleos disponíveis para o seu navegador a 1, de modo que você veja diferença do recurso de hardware.   

 Leia mais

Construindo aplicação Business application Silverlight – parte I

Neste artigo gostaria de demonstrar o potencial do Silverlight como uma linha de negócios (LOB) da plataforma. Atualmente, estou escrevendo um artigo sobre a estrutura da linha de aplicativos de negócios, e esse quando concluído será, essencialmente,  uma aplicação prática de um aplicativo de LOB em Silverlight. Há, atualmente, poucos exemplos notavelmente como uma plataforma de desenvolvimento do aplicativo LOB.

Este artigo irá fornecer um exemplo de uma aplicação LOB, e usará o banco de dados Microsoft SQL Server. Com base em limitações de tempo, não será uma solução end-to-end completa, mas irá proporcionar um bom exemplo das possibilidades de ganho usando o Silverlight como uma plataforma de desenvolvimento, e fornecer uma base sólida a partir da qual você pode construir seus próprios aplicativos LOB.

abraços,

leia

Flávia Moreira

Template em Silverlight, pronto para usar ou estudar.

Template silverlight 4

Abraços,

Flávia Moreira

INTRODUÇÃO

Boa noite Galera!

Hoje gostaria de compartilhar com vocês, uma postagem com as principais características, das mais comentadas tecnologias de desenvolvimento de aplicações RIA(Rich Internet Applications) do mercado, o Microsoft Silverlight e o Adobe Flex.
São ao todo 20 características destacadas, sendo que elas foram aplicadas nas últimas versões das plataformas destacadas.
Gostaria da opinião de vocês, meus amigos leitores e desenvolvedores, até mesmo para que possam avaliar o conteúdo, caso eu tenha descrito algo errado. Lembrando que a intenção desta postagem, não é denegrir nenhuma tecnologia, mas sim, apresentar suas características!

Abaixo, segue a tabela:

Obrigado pessoal!

Abs.

Robson Fernandes

Acabei de publicar no Expression Gallery uma behavior para filtrar imagens em uma colleção do Deep Zoom.

Essa behavior, quando aplicada a um objeto do tipo MultiScaleImage, permite que se filtre as imagens dessa coleção de forma semelhante ao que acontece no site Memorabilia do HardRock Café.

O uso da behavior é muito simples:

• Anexe a behavior à um objeto MultiScaleImage.
• Defina as propriedades Source e MetadataUri da behavior respectivamente para a url da galeria e o arquivo de metadados da galeria.
• Defina o valor da propriedade Filter da behavior para o filtro que quer aplicar.

A behavior trabalha com o arquivo de metadados gerado pelo Deep Zoom Composer para saber quais tags estão associadas a cada imagem. Ela entende tags separadas por vírgula (,) tanto para atribuir às imagens quanto para filtrar. Filtrar por múltiplas tags vai exibir todas as imagens que tenham pelo menos uma das tags do filtro.

O arquivo de metadados não precisa ser necessáriamente o mesmo gerado pelo Composer, mas deve ter o mesmo formato. A behavior o campo ZOrder do arquivo de metadados para saber qual é cada imagem, portanto, se esse arquivo for gerado manualmente deve se tomar o cuidado de garantir que estão sendo atribuídas as tags às imagens certas e sempre que a galeria for atualizada o arquivo de metadados também precisará ser atualizado.

A behavior também expõe uma propriedade (AvailableTags) que é um array contendo todas as tags disponíveis na galeria atual. Isso pode ser bem útil se quisermos exibir na tela todas as tags, como fiz no exemplo que está no Expression Gallery.

Cada vez que o filtro for alterado, a galeria será filtrada e ocorrerá uma animação para exibir as imagens desejadas. É possível controlar o tempo dessa animação e sua função de Easing.

As imagens são posicionadas de forma a preecher o espaço do controle da melhor forma possível, mas ainda preciso melhorar a lógica para quando apenas uma imagem é exibida.

Também há espaço para melhorias no algorítmo de posicionamento, no que diz respeito ao alinhamento das imagens do lado direito.

O código fonte está disponível no Codeplex. Sugestões, melhorias e bug fixes podem ser reportados lá ou aqui no blog.

Em breve estarei aumentando essa biblioteca do Codeplex com outras behaviors e helpers.

Ahhh, quem gosta de futebol pode ver essa behavior em ação em http://www.msnnacopa.com.br.

Boa noite pessoal!

Super noticia!!! Foi lançado ontem 22/04/2010, a versão release do JavaFX 1.3, e novidades muito interessantes foram adicionadas, que vão desde a performance dos aplicativos, até a inclusão de novos controles.

NOVOS RECURSOS

* Novos controles de interface de usuário, CSS, e layout
* A família de fontes nativas no JavaFX chamado Amble
* Suporte para o desenvolvimento de aplicações em TV
* Melhorias para aplicações móveis, com a disponibilidade do emulador móvel na plataforma Mac
* Melhorias nos recursos de edição no NetBeans IDE 6.9 Beta
* Novas funcionalidades e melhor desempenho no JavaFX Production Suite
* O desempenho Bind: 2-3x mais rápido
* O tempo Applet start-up: 20% mais rápido (com o Java SE 6u18 +)
* Texto de Animação: 5-10x mais rápido
* Animações altamente complexas: até 10x mais rápido
* Memória: 20-33% de redução (com o Java SE 6u18 +)
* UI Controls: 50% mais rápido, 33% -50% menos memória (típico)

UI CONTROLS

A classe ChoiceBox fornece suporte para a criação de uma lista de opções . Por padrão, o ChoiceBox tem a caixa de opções fechada, e o primeiro item é selecionado. Você pode manipular os itens através das propriedades  selectedIndex e selectedItem. Idêntico ao ActionScript 3 do Adobe Flex. hehehe…

1 – Choice Box UI Control

A classe ListView exibe uma lista horizontal ou vertical de itens a partir da qual o usuário pode selecionar ou interagir. A ListView é construído a partir de uma seqüência de “itens”, que pode ser qualquer tipo de dados. Por exemplo, pode ser uma seqüência de String, Number, ou classes customizadas como “Clientes” por exemplo.

2 – ListView Control Vertical e Horizontal

A classe Tooltip pode ser usada para exibir informações adicionais sobre um determinado controle de interface. O Tooltip é apresentado, a partir do momento que o cursor do mouse passar sobre determinado controle.

3 – Tooltip

Acessem agora mesmo, e confira todas as novidades do JavaFX
Obrigado! E viva o mundos das RIAs!

Robson Fernandes

Em continuação a série de tutoriais sobre AS3…

No ultimo tutorial falamos um pouco sobre efeitos, filtros movimentos, vamos nesta parte mostrar alguns exemplos dos mesmos efeitos, repetições, funçoes de animação, efeitos paralelos e sequenciais. Fade, Blur, Glow… Começando…

6.4. Efeitos, Exemplos e Easing Functions

Com estas funções e a com a ajuda de um eventListner podemos fazer um efeito bem agradavel de uma imagem a saltar infinitamente… vejam o código:

Esta função (customJump) fará com que a imagem esteja a fazer um efeito de salto repetivamente, o que não passa de movimentos repetidos +-5px na vertical.
Muito simples e com um aspecto bem agradável.

Dentro do package mx.effects encontram a class easing, que nada mais nada menos nos disponibiliza algumas funções de animação que introduzem efeitos durante a animação, vulgarmente chamadas easing Functions que podem ser adicionadas a qualquer elemento explicado em cima.

Se escreverem mx.effects.easing. Aparecer-vos-á uma lista das funções easing, funções estas que podem ser introduzidas nos nossos efeitos, utilizando o parametro .easingFunction como vou passar a explicar a seguir num exemplo que vai simular a queda de uma imagem(…)
Leia o resto de Tutorial Action Script 3 – 017 (1,213 palavras)

© Mário Santos em TSW – That Should Work, 2010. |
Link Permanente |
Sem comentarios |
Adicionar ao
del.icio.us –
Stumble it -
Google Bookmark -
technorati


Mais artigos relacionados nas categorias: Air, animação, animation, as3, blur, easing, effects, Flex, glow, move, parallel, sequencial, Tutorial