Flex‎ > ‎

Flex - Efflex - 3d effects

Intro


Efflex is a 3D effects project hosted currently on googlecode.


Summary

Efflex is a nice and small library dedicated for effects on a ViewStack. The ViewStack contains several elements, and shows only one of them according to "selectedIndex" element (starts with 0). Efflex enables a nice transition from one index to another. Such as Flip/Cube/Cover and more. The library is best used uncustomized - since some attributes seem to malfunction (duration in cube rotation, direction on all effects).

To use the effect, all you need to do is the following :

<viewStackEffects:FlipPapervision3D id="switchDialog" transparent="true" duration="2000"/>

<mx:ViewStack id="dialogsContainer" height="100%" width="100%" selectedIndex="{BLANK_DIALOG_INDEX}">
<notifications:SettingsNotificationsDialogRenderer
hideEffect="switchDialog" showEffect="switchDialog"/>
<rules:SettingsRulesDialogRenderer
hideEffect="switchDialog" showEffect="switchDialog"/>
<settings:SettingsItemDialogRenderer
hideEffect="switchDialog" showEffect="switchDialog"/>
<users:SettingsUsersDialogRenderer
hideEffect="switchDialog" showEffect="switchDialog"/>
<mx:Canvas height="100%" width="100%"
hideEffect="switchDialog" showEffect="switchDialog">
<mx:Image source="@Embed('/assets/img/settings/loading.png')" verticalCenter="0" horizontalCenter="0"/>
</mx:Canvas>
</mx:ViewStack>

<mx:ToggleButtonBar id="buttonsBar" dataProvider="{dialogsContainer}" visible="false"/>

<mx:Script>
<![CDATA[ public function changeIndex(index:int):void{ buttonsBar.selectedIndex=index;}]]>
</mx:Script>


The code above is taken from DialogSettings.mxml - some of the lines were removed in order to make it wiki-able.

Code Sample Explained

First I define the effect.

Then, you should note that I added "hideEffect" and "showEffect" on ViewStack? elements. This means - you can use different effect for different elements.

Last but not least, I added a function that changes the currently displayed index. You should know that if the displayed index - the view stack is smart enough not to do anything.

That's it

References

Comments