Viewstack Transitions in Flex 4
So I’m busy with a project building an Adobe AIR application where at this point I’m working out the layout of the application.
Transitions are usually very simple to accomplish with state transitions, but in my framework of the application I wanted to avoid using states between the different pages that were to be shown. Using transitions on a page defined in a NavigatorContent item within the ViewStack showed to be a syntactically slightly different world.
To cut the story telling, here’s a snippet of code from my project that one can use to accomplish some fading effects on the NavigatorContent within a ViewStack.
The declarations:
<mx:Fade id="Show" duration="500" alphaFrom="0.0" alphaTo="1.0"/>
<mx:Fade id="Hide" duration="500" alphaFrom="1.0" alphaTo="0.0"/>
</fx:Declarations>
and the ViewStack:
<s:NavigatorContent id="intro" showEffect="{Show}" hideEffect="{Hide}">
<components:PageIntro id="pageIntro"/>
</s:NavigatorContent>
<s:NavigatorContent id="projects" showEffect="{Show}" hideEffect="{Hide}">
<components:PageProjects id="pageProjects"/>
</s:NavigatorContent>
</mx:ViewStack>
where, of course, PageIntro and PageProjects are some defined components not included in this code.
Pretty obvious, isn’t it? 