Flex101：用Flex创建Swipe翻板/Slide效果

本文来自：http://www.insideria.com/2009/12/flex-101-creating-an-swipeslid.html
在本例中，我们将谈论怎样创建swipe/slide效果。当你从一个屏幕翻到另外一个屏幕上，你经常可以看到触摸设施里出现“转变”，我们就是受到了它的启发。一页内容从滑移到一边，另外一页从另外一边无缝滑动进来。
在我们进一步了解如何获得这样的效果之前，我们首先来检验下实际的动态效果。点击下面的“Animate!”按钮，引发效果。你可以改变下拉式清单中的选定条目，以改变动画的方向。
咋一看上去，你可能会想“啊，这么简单“。然后认为一般的显示与隐藏效果就可以成功。如果你处理的内容是mx: ViewStack（正如这个范例的一样）里的，情况就不一定如你想像的那么简单了。使用不同的显示和隐藏mx:Move效果实际上会产生呆板和不连贯的动画，这样就不能达到设想的效果。
在这个范例中，我使用了一个mx:Im age来显示“抓取“现在浏览的内容，并使用了一个mx:Parallel效果来动画化新的内容的滑入和图片的滑出。通过抓取现在可视组件的快照，你可以动画化快照，而同时隐藏实际内容(以显示新的内容)。这个mx:Parallel效果让每个内容都同步，无缝连接，用户完全不会注意到。
在本例中，我有些小的，静态尺寸的内容，很容易就动画化。这种方法也可应用于大些的物体。不过显示/隐藏的物体都应该是同样的尺寸。这其实也是Adobe Max（在下面的视频里）的多点触摸keynote demo里的一指翻板使用的方法。
你可以看到，如下所示，基本的布局代码非常简单，直截了当。有个面板，包括了ViewStack里的内容。唯一可能看上去比较奇怪的就是图片，可视和includeInLayout 都是false。这就是会被用来将动画内容从屏幕上关闭的图片。
<mx:Panel
title="Swipe Effect Demo"
horizontalCenter="0"
verticalCenter="0"
width="300"
height="300"
layout="absolute"
horizontalScrollPolicy="off"
verticalScrollPolicy="off">
<mx:ViewStack
id="content"
width="100%" height="100%">
<mx:Canvas
width="100%" height="100%"
showEffect="{showEffect}" >
<mx:DateChoos