Tuesday, 16 November 2010

Flex 4 Cool Floating effect

This is an effect I made that looks like the components are floating free, combine with different easing effects for maximum results.

View an example here

<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<s:Sine id="sineEasing"
easeInFraction="0.3"/>

<s:Move3D id="hover1"
xFrom="{hover1.target.x}" xBy="5"
yFrom="{hover1.target.y}" yBy="25"
zFrom="{hover1.target.z}" zBy="10" duration="1800"
repeatCount="0" repeatBehavior="reverse" easer="{sineEasing}"
effectEnd="hover1.target.alpha=1.0;"/>

<s:Move3D id="hover2"
xFrom="{hover2.target.x}" xBy="5"
yFrom="{hover2.target.y}" yBy="25"
zFrom="{hover2.target.z}" zBy="10" duration="2400"
repeatCount="0" repeatBehavior="reverse" easer="{sineEasing}"
effectEnd="hover2.target.alpha=1.0;"/>
</fx:Declarations>





<s:Panel title="Floating Panel..." x="523" y="208" width="192" height="201" id="floatPanel" creationComplete="hover1.play([floatPanel])" horizontalCenter="0" verticalCenter="0">
<s:VGroup horizontalCenter="0" verticalCenter="0" height="100%" verticalAlign="middle" width="100%" horizontalAlign="center" contentBackgroundColor="#6A6767">
<s:Button label="Button-1" chromeColor="#851D1D" color="#F0F0F0"/>
<s:Button label="Button-2" chromeColor="#5DB705" color="#3C3B3B"/>
</s:VGroup>
</s:Panel>

<s:Panel title="Floating Panel..." x="523" y="208" width="192" height="201" id="floatPanel2" creationComplete="hover2.play([floatPanel2])" horizontalCenter="250" verticalCenter="110">
<s:VGroup horizontalCenter="0" verticalCenter="0" height="100%" verticalAlign="middle" width="100%" horizontalAlign="center" contentBackgroundColor="#6A6767">
<mx:Text text="This is floating with a different duration to un-sync with the other..." width="164" height="117" x="13"/>
</s:VGroup>
</s:Panel>

Enjoy!

No comments: