Search:
  • Home
  • Examples
    • Thumb

      Flex Examples

      Check out our Flex Examples!

    • Thumb

      Flash Builder Examples

      Check out our Flash Builder Examples!

    • Thumb

      AIR Examples

      Check out our AIR Examples!

    Adobe® Flex, Adobe® Flash Builder and Adobe® AIR are registered trademarks of Adobe Systems.
  • Components
    • Thumb

      WP Flex Contact Form

      Check out our WP Flex Contact Form!

    • Thumb

      Flash CountDown Plugin

      Check out our Flash CountDown Plugin!

    This is an overview of all our Flash/Flex based Components.
  • Jobs
  • Guest Poster
  • Forum
  • Contact Us
Subscribe to Flex BlogSubscribe
  • Examples
Browse > Home / Examples / Flex Effects Example in a ViewStack

Flex Effects Example in a ViewStack

16 February 2009

Line Break

Author: Arjan (36 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:

  1. Viewstack Repeater Example
  2. ViewStack, LinkBar and ButtonBar Example
  3. Flex 4 Effect Example: Sliding text using the Move Effect

Written by Arjan · Filed Under Examples 

Was this post useful to you?

1 Star2 Stars3 Stars4 Stars5 Stars (8 votes, average: 4.13 out of 5)
Loading ... Loading ...

Comments

3 Responses to “Flex Effects Example in a ViewStack”

  1. Viewstack Repeater Example : Flex Blog on November 16th, 2009 7:03 pm

    [...] 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 [...]

  2. naten on December 19th, 2009 7:19 am

    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.

  3. Roelof on December 23rd, 2009 7:07 am

    Hi naten,

    We are using the CodeColorer Plugin.

    Regards,
    Roelof

Get Adobe Flash player

  • Sponsors

  • Popular Tags

    • AdvancedDataGrid
    • AIR
    • ArrayCollection
    • baseColor
    • Button
    • CursorManager
    • DataGrid
    • Dynamic
    • Effects
    • File
    • Flash Builder
    • Flash Builder 4
    • Flashvars
    • Flex 4
    • Framework
    • HSlider
    • Icon
    • Image
    • itemRenderer
    • LinkBar
    • PHP
    • ProgressBar
    • Repeater
    • Style
    • SWIZ
    • Timer
    • Tree
    • Twitter
    • ViewStack
    • VSlider
  • Flex Blog Readers

  • Flex Jobs (from Flex Jobs.org)

    Your Job here? Post your job @ Flex Jobs.org

    Advertisement

  • Recent Posts

    • SWIZ Framework in Flex 4 Example: Part I
    • Dynamic AdvancedDataGridColumn in Flex 4
    • How to make a magnetic button in Flex 4
    • Using ASDoc as an External Tool in Flash Builder 4
    • Flex Encryption (MD5, SHA1, SHA224, SHA256, HMAC)
    • The SWIZ framework for Flex 3 / Flex 4: Easy, Light and Very Powerfull
    • Call Javascript function from Flex / Flash Builder (AS3)
    • Flex FlashVars in AS3 Example
    • Data Dependant Tree Icon with Tree in AdvancedDataGrid with iconFunction
    • WordPress Flash / Flex Comments Form
  • Categories

    • Examples
    • Guest Poster
  • Archives

    • August 2010
    • June 2010
    • May 2010
    • April 2010
    • March 2010
    • February 2010
    • January 2010
    • December 2009
    • November 2009
    • October 2009
    • March 2009
    • February 2009
  • Blogroll

    • Adobe Flex Jobs
    • NL for Business
  • Meta

    • Register
    • Log in
    • WordPress
    • XHTML

Copyright © 2010 Flex Blog · Adobe® and Adobe® Flex are registered trademarks of Adobe Systems.

WordPress Adobe Flex Adobe Flash Builder Adobe AIR Creative Commons License

  • Popular Posts

    • Control Webpage in HTML Control in AIR 5 votes, average: 5.00 out of 55 votes, average: 5.00 out of 55 votes, average: 5.00 out of 55 votes, average: 5.00 out of 55 votes, average: 5.00 out of 5 (5.00 out of 5)
    • Data Dependant Tree Icon with Tree in AdvancedDataGrid with iconFunction 5 votes, average: 5.00 out of 55 votes, average: 5.00 out of 55 votes, average: 5.00 out of 55 votes, average: 5.00 out of 55 votes, average: 5.00 out of 5 (5.00 out of 5)
    • List Directory with AIR in Flex 4 4 votes, average: 5.00 out of 54 votes, average: 5.00 out of 54 votes, average: 5.00 out of 54 votes, average: 5.00 out of 54 votes, average: 5.00 out of 5 (5.00 out of 5)
    • Progressbar in Datagrid Example 4 votes, average: 5.00 out of 54 votes, average: 5.00 out of 54 votes, average: 5.00 out of 54 votes, average: 5.00 out of 54 votes, average: 5.00 out of 5 (5.00 out of 5)
    • WordPress Flash / Flex Comments Form 4 votes, average: 5.00 out of 54 votes, average: 5.00 out of 54 votes, average: 5.00 out of 54 votes, average: 5.00 out of 54 votes, average: 5.00 out of 5 (5.00 out of 5)