In this example,we will walk through the creation of a swipe/slide effect inspired by the transitions that you often see in touch-capable devices when you use a finger to swipe from one screen to the next. One piece of content slides off to one side,and another piece of content seamlessly slides in from the opposite side.

Before we get into how this effect is achieved,let's first examine the effect in action... Click on the "Animate!" button below to invoke the effect. You can change the animation direction by changing the selected item in the drop down list.

At first glance you might think "oh,this is easy",and think normal show and hide effects would do the trick. If you are working with content within a mx:ViewStack (as in this example),this is not necessarily the case. Using separate show and hide mx:Move effects would actually lead to a jerky and disjointed animation,which does not at all achieve the desired effect.

In this example,I use an mx:Image to display a *capture* of the currently viewed content,and use a mx:Parallel effect to animate the slide-in of the new content and the slide out of the image. By capturing a snapshot of the currently visible component,you can animate the snapshot while the actual content is hidden (in order to show the new content). The mx:Parallel effect keeps everything in synch,and makes it seamless and completely un-noticeable by the user.

In this case,I have small,static-sized content,which is easy to animate. This approach also scales well to larger objects,however both objects being shown/hidden should be the same size. It also happens to be the same approach used in the one-finger swipe in the Multitouch keynote demo from Adobe Max (in the video below).

?

You can see below that the basic layout code is very simple and straightforward. There is a Panel,which contains content inside of a ViewStack. The only thing that may appear odd is the Image,where visible and includeInLayout are both false. This is the image that will be used to animate the content off of the screen.

?

You may have also noticed that the show effect for the content within the viewstack referred to the showEffect instance. This is a Parallel effect that gets used to animate the new content into the screen,and the captured image off of the screen. One important thing to notice here is that the animateImage instance is hidden on the effectEnd instance. This is done to prevent any errors or visual artifacts.

?

Now,let's examine the code that makes it all happen. The animate function sets the size and content of the animateImage instance,and then movement parameters are set on the two mx:Move effects (parameters used for the animation). The toggleVisibility() function just toggles the visible child of the viewstack. When the visibility of the children changes,the showEffect effect instance is triggered,which triggers the smooth and seamless animation of the content.

?