Flexstore源码解析1 ViewStack+ToggleButtonBar实现幕布特效

第一棵树（上）：利用ViewStack+ToggleButtonBar实现flexstore中的幕布特效

目标：学会制作幕布切换场景的动画效果，仿制flexstore中3个主页面切换的特效。

1. 首先我们来分析在Flexstore.mxml的成分，eclipse中会列出这个文件的大纲outline。

同样我们可以打开Flexstore.mxml这个文件，看到里面有很多as代码，函数，有mx标签等。为了把注意力集中到我们想要了学习的幕布切换的功能上来，我们先剔除这个文件中可以无视的内容。

我们可以新建一个flex工程demo1来完成我们想达到的效果，新建一个叫flexstore的application mxml(一下所出现的flexstore.mxml如没有所特别说明都是指的这个demo1中的flexstore.mxml) 在application按照上图的结构拖入控件。

2．然后仿照flexstore，新建3个自定义控件，来模拟HomeView、ProductsView、SupportView。

我们给这个HomeView打上红色的底色和简单文字，以示区别。ProductsView、SupportView分别以黄色和蓝色显示底色。

好，3个自定义组件定义完了之后，我们在主程序也就是flexstore中建立它与其他3个页面之间的关联。

注意，在操作前，我们把demo1中application标签中的xmlns：ns1="*"改为xmlns="*"，这样我们就可以直接以文件名的标签形式在flexstore.mxml调用同目录下所有自定义组件了。

点击ViewStack控件，会出现view管理按钮，点击加号。在弹出的对话框中进行下图设置，不错这里就是要把做好的3个view控件往主界面flexstore中添加。同样的把另外2个view也依次添加进去

添加完后，我们看下flexstore.mxml的代码

<mx:ViewStack id="storeViews" width="100%" height="100%">

<HomeView label="Home" width="100%" height="100%">

</HomeView>

<ProductsView label="Products" width="100%" height="100%">

</ProductsView>

<SupportView label="Support" width="100%" height="100%">

</SupportView>

</mx:ViewStack>

<mx:ViewStack></mx:ViewStack>之间被添加了3个自定义view。

3．Run一下，我们的demo，会发现当前只能显示第一个view，HomeView。那么如何像flexstore这个案例一样点击按钮切换不同的view呢？

我们在flexstore这个案例中可以看到，3个view是通过点击菜单bar上的按钮来产山页面切换效果的。

接下来我们就个demo中导航条加入按钮。

我们再来重温下demo的控件结构，大家可以看到之前我还定义了一个ToggleButtonBar控件，看来这个控件就是用来定义按钮用的。我们在design界面点击这个控件，会发现，诶！和ViewStack一样它也有一排加减号按钮，我们点击下加号看看，对弹出的对话框进行如下设置。

这时我们会发现ToggleButtonBar上多了4个按钮，其中前3个是我们需要的，而后面一个是之前我们设置对话框时，flex builder给我自作主张加上的。

那么我们就点击减号把最后一个按钮删除掉。

Ok，切换到source界面，看下flexstore.mxml的代码。我们可以看到，ToggleButtonBar设置了dataProvider属性，dataProvider什么意思呢？顾名思义数据提供者，id=storeViews的这个控件，也就是我们的ViewStack控件提供了ToggleButtonBar建立导航按钮时所需要的数据。

<mx:ApplicationControlBar width="100%" id="abc">

<mx:ToggleButtonBar dataProvider="storeViews">

</mx:ToggleButtonBar>

</mx:ApplicationControlBar>

好，再让我们Run一下这个application。恩，很好，点击3个按钮已经能切换页面了。

4．细心的你会发现，我的demo1中切换页面时是如此的生涩，没有过渡可言，直接蒙太奇式的方式显然不能满足你们的需要。Ok，那么接下来我们就来加上过渡特效。

点击flexstore.mxml中ViewStack控件，为每一个view设置effect。方法如下。选中某个view之后，点击Flex Propert的第二个小按钮

下发会列出该控件所支持的所有事件特效等。在Effects下的hideEffect和showEffect设置WipeUp和WipeDown，表示的是当这个view要被show出来的时候是从下网上慢慢显示，在消失的时候是从上往下慢慢消失，我这里说倒了也有可能，这种东西我从来不记，设错了，就换一个。观众朋友们可能会说这个WipeDown和WipeUp是哪里冒出来的干活？我查了下api帮助，WipeDown是mx.effects包下的一个class，用来对Object也就是flex中拖出来或者自定义，或者new出来的控件对象进行动画特效一个类。 此外还有WideOut WideIn等各类特效，自己一个个替换看效果的学习最为直接，我这里就不啰嗦了。

大家可以看到为控件加入了effects后控件的代码中就会加入showEffect、hideEffect等事件。

<HomeView label="Home" width="100%" height="100%" showEffect="WipeDown" hideEffect="WipeUp">

</HomeView>

好了，为ViewStack下的3个view都添加完effects后，我们再来Run一下application。

哈哈，目的达到，除了界面难看点外，动画效果和正版的flexstore几乎一模一样。

以下给出了demo1工程源文件的下载，大家也一步一步做做看，利用ViewStack+toggleButtonBar来实现幕布特效吧。

至此，对于第一棵树的上半部分学习完毕。

评论

1 楼 hawkingxwg 2010-04-23  

楼主，你的这篇分析很好，我很喜欢flexstore这个例子，但苦于项目看不懂，能否把它全部分析一下么， 谢谢！。还有您的新博客，貌似还没建好。进去了只有一张图片。