Flex Effects Example in a ViewStack
Line Break
Author: Arjan (47 Articles) - Author Website
Arjan is a SAP Consultant specialized in ABAP and Front End development techniques like Web Dynpro, Adobe Interactive Forms, Flex and AIR. In his free time he likes to create examples for Flex-Blog and other applications using Flex, AIR and PHP. Other hobbies are movies and music. He is also the co-owner of Flex-Blog.com.
Since Adobe got a hold of Macromedia, they had Flash in their arsenal. And when you are using Flash, you have the ability to create cool, smooth animations. Using that technology, Adobe added a number of standard effects to Flex to make your applications look even better with smooth transitions using those effects. To give you an idea, lets create a ViewStack that switches views using effects.
First of all, we need a ViewStack (ofcourse) and some navigation, I will use a LinkBar in this example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <mx:LinkBar dataProvider="viewStack"/> <mx:ViewStack height="200" width="300" id="viewStack"> <!-- Red View --> <mx:VBox backgroundColor="#FF0000" label="Screen One"> </mx:VBox> <!-- Green View --> <mx:VBox backgroundColor="#00FF00" label="Screen Two"> </mx:VBox> <!-- Blue View --> <mx:VBox backgroundColor="#0000FF" label="Screen Three"> </mx:VBox> </mx:ViewStack> |
Ok, this will work just fine if you don’t want your application to get the necessary ooohs and aaahs. But let’s say we do, let’s get some cool transitions in there. I will use two standard Flex effects: WipeLeft & WipeRight. Lets declare the two in MXML, give them an arbitrary duration and id. Just make sure you don’t forget the ids later on. Experiment with the duration values to see which one fits your needs.
1 2 | <mx:WipeLeft duration="500" id="wipeLeft"/> <mx:WipeRight duration="500" id="wipeRight"/> |
Ok, the final thing we have to do is assigning the ids to the different VBoxes in the stack, whe are going to use the two standard “effect moments” showEffect and hideEffect to put our WipeLeft and WipeRight to use. I’m going to wipe the views out to the left when it’s going to be hidden and wipe the views to the right when they are going to be shown:
1 2 3 4 5 6 7 8 9 10 11 | <mx:VBox showEffect="{wipeRight}" hideEffect="{wipeLeft}" backgroundColor="#FF0000" label="Screen One"/> </mx:VBox> <mx:VBox showEffect="{wipeRight}" hideEffect="{wipeLeft}" backgroundColor="#00FF00" label="Screen Two"/> </mx:VBox> <mx:VBox showEffect="{wipeRight}" hideEffect="{wipeLeft}" backgroundColor="#0000FF" label="Screen Three"> </mx:VBox> |
Guess what? That’s It! No motion / shape tweens like in flash, it’s all build in! Check the example I created, click the links in the LinkBar to see the animations. Use your right mousebutton > view source to view the source code.
Related posts:
- Viewstack Repeater Example
- ViewStack, LinkBar and ButtonBar Example
- Flex 4 Effect Example: Sliding text using the Move Effect
- Flex Mobile View Transition Direction
- Flex 4 Resize Effect Example
Written by · Filed Under Examples
Was this post useful to you?
Please rate this post, follow us @ twitter, or link to this page from your website!
(11 votes, average: 4.27 out of 5)
Loading ...Comments
5 Responses to “Flex Effects Example in a ViewStack”
[...] following example shows you how to use a repeater inside a viewstack. Our example about viewstack effects is very popular, and i recently found out how to use the repeater, i decided to write an example [...]
Need urgent help.
Can you please tell me how you have embaded the xml on this page and which WP plugin or editor are you using to show the formatted colored xml snippet with line number.
Thanks in advanced.
Hi naten,
We are using the CodeColorer Plugin.
Regards,
Roelof
Please can you explain me how to apply this same effect in Flex 4,because all content inside ViewStack must be wrapped inside NavigatorContent container,and i just can’t get it to work.
Greetings.
I noticed that in Flex 4, if I disable an element on the viewstack, the generated button in the LinkBar is not affected. Is there any way to disable or even better hide a button based on the view stack content.
Thanks Gary