Mostrando postagens com marcador tweenmax. Mostrar todas as postagens
Mostrando postagens com marcador tweenmax. Mostrar todas as postagens

sábado, 31 de outubro de 2009

Usando Path no Flex 4

Olá, hoje vou mostrar como usar um novo componente primitivo do Flex SDK 4, o Path:

"The Path class is a filled graphic element that draws a series of path segments. In vector graphics, a path is a series of points connected by straight or curved line segments. Together the lines form an image. In Flex, you use the Path class to define a complex vector shape constructed from a set of line segments."

Não vou arriscar uma tradução, mas basicamente fala que o Path é um elemento gráfico de preenchimento que desenha uma série de formas. Em vetores gráficos, o Path é uma série de pontos conectados por linhas retas e curvas. Juntas formando uma imagem. No Flex, você pode usar a classe Path para definir a construção de um vetor complexo a partir de um conjunto de linhas.

Bom, pelo menos viram que o curso de inglês está rendendo alguma coisa!

Continuado, fiz um exemplo bem simples usando o máximo que o framework possível, para mostrar também algumas outras facilidades que o novo SDK tráz:



No exemplo, eu fiz um Path com o data contendo váriaveis Bindable, e o preenchimento, borda e filtro, todos por MXML.
A animação, eu usei o framework TweenMax, vale a pena estudá-lo. É parecido com a Tweener do Zeh Fernando, mas com várias funcionalidades que fazem diferença.
Não usei nenhuma fórmula para o Path parecer elástico, o foco é como ficou fácil desenhar e animar vetores complexos.

Path.mxml
<?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/halo"
width="400"
height="400"
applicationComplete="applicationCompleteHandler()"
viewSourceURL="srcview/index.html">
<fx:Script>
<![CDATA[
import com.greensock.TimelineMax;
import com.greensock.TweenMax;
import com.greensock.easing.Bounce;
import com.greensock.easing.Elastic;

[Bindable]
private var _timelineMax:TimelineMax;

[Bindable]
public var pathY:Number = 10;

[Bindable]
public var pathWidth:Number = 200;

[Bindable]
public var pathHeight:Number = pathWidth + pathY;

private function applicationCompleteHandler():void
{
_timelineMax = new TimelineMax();

_timelineMax.addChild( new TweenMax( this, 12, { pathY:height - myPath.height, ease:Elastic.easeOut } ) );
_timelineMax.addChild( new TweenMax( this, 2, { pathHeight:height, ease:Bounce.easeOut } ) );

_timelineMax.pause();
}

private function playClickHandler():void
{
_timelineMax.play();
}

protected function stopClickHandler():void
{
_timelineMax.currentTime = 0;
_timelineMax.stop();
}

protected function labelClickHandler():void
{
navigateToURL( new URLRequest( 'http://www.idemax.net/' ), '_blank' );
}
]]>
</fx:Script>
<s:Rect width="100%"
height="100%">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#ffffff" />
<s:GradientEntry color="#cccccc" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<mx:Image horizontalCenter="0"
verticalCenter="0"
source="@Embed('/assets/images/idemax.jpg')">
<mx:filters>
<mx:BlurFilter quality="3" />
</mx:filters>
</mx:Image>
<s:VGroup top="10"
left="10">
<s:Button label="play"
click="playClickHandler()" />
<s:Button label="stop"
click="stopClickHandler()" />
</s:VGroup>
<s:Path id="myPath"
data="m 0 {pathY}
q {pathWidth/2} {-((pathHeight-pathY)-pathWidth)} {pathWidth} 0
Q {pathWidth+((pathHeight-pathY)-pathWidth)} {(pathHeight-(pathWidth/2))-((pathHeight-pathY)-pathWidth)} {pathWidth} {pathHeight}
h {-pathWidth}
Q {-((pathHeight-pathY)-pathWidth)} {(pathHeight-(pathWidth/2))-((pathHeight-pathY)-pathWidth)} 0 {pathY}
z"
horizontalCenter="0">
<s:stroke>
<s:SolidColorStroke color="#333333"
weight="1" />
</s:stroke>
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#a8d848" />
<s:GradientEntry color="#63802a"
alpha=".5" />
</s:LinearGradient>
</s:fill>
<s:filters>
<s:DropShadowFilter angle="90"
distance="20"
quality="3"
blurX="20"
blurY="20" />
</s:filters>
</s:Path>
<s:Label right="10"
bottom="10"
text="www.idemax.net"
fontWeight="bold"
alpha=".25"
click="labelClickHandler()"
buttonMode="true" />
</s:Application>

O ver ou baixar o projeto / código-fonte, clique com o botão direito na aplicação e depois em "View Source", ou clique aqui.

Qualquer dúvida, enviem para idemax@gmail.com.