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!

Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *