每天学一点flex（2）：Accordion 组件

  很久没去练习flex 开始有点生疏，用起来还是很舒服。flex 3和flex4之间存在一些差别，所以在选择的时候需要小心一点，今年主推flex 4 所以初学的人可以跳过flex 3直接学flex4。 因为flex 开发是建立在as 3基础上，故此研究类库之间结构是一件很不错的事情。毕竟结构美是学习编程一种美学流。

  今天的纯粹练习，也没有其他的。对问题引发的事情会说一下。例如写的swf 的减容问题，这个真的是一个很头疼的事情。不得不说，减容是一个课题。flex 3 的组件在没有优化下，生成的质量swf 的体重会大了一点。比如一个胖子，为蜗牛式的网速加载进去。可想而知。呵呵，一个不好笑的冷笑话。开始以个话题，这个flash 在国家的网站上看到，于是山寨了一下，采用了这种Accordion 组件。在这里我不讲解他的用法。的确很多资料已经齐全了。现在开始制作一下，看看在没有优化的前提是如何。

 

用法大概是如此，把官方网一些网站图片切了进去，然后进行嵌入去。采用的组件Image组件。进行这些工作后，还需要对字体进行样式制作。当初希望通过<mx:Canvas 组件进行设置，但是查询资料后，发现这种办法行不通。于是百度一下。找到了答案

<mx:Accordion  id="accordion" headerHeight="25" headerStyleName="accordionStyle"

通过使用这个属性：headerStyleName。再配合样式制作，设置字体的大小和对齐方式。有点不爽的时，在使用css样式的时候，没有进行提示功能。这一点flex builder 3一点对css支持不足的地方。

<mx:Style>  
        .accordionStyle
        {  
          font-size:12px;/*设置字体大小*/
          text-align:center;/*设置字体对齐方式*/
        }  
    </mx:Style> 

接下来就按习惯的思维进行嵌入图片<mx:Image  source="@Embed(source='image/1.jpg')

但是这种嵌入方式导致一个问题了。什么问题？我发现生成的swf 大小达到302k了，比较大了。因为没有对其图片进行优化。

一方面可以对图片进行减容，这个办法可以减少swf生成的大小。

其次，想办法生成swf，初步预想是这样。同时也更改Accordion 的swf容器。问题是能否成功了？暂时仅仅是一种预想。

由于采用嵌入去的，图片越多生成主的swf 的大小越大。如果采取外部加载的方式可以使主文件减少

  <mx:SWFLoader  source="image/1.swf" width="100%" height="78" click="LinkURL(event)"/>

我们对每一张图片都采用swf格式进行生成，然后使用swfloader组件进行外部加载。

这样原先302k的减少到287k ，但实际上我们希望嵌入swf的同时 也希望他的swf 大小也会减少，不知道采用什么办法会比较适合。

采用swf的方式对图片要进行一步压缩。

故此这个问题也困扰人。

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="228" height="160" creationComplete="init()"> <mx:Script> <!--[CDATA[ import mx.controls.Alert; import flash.utils.Timer; import flash.events.*; private var timer:Timer; private var num:int=0; private function init():void { timer=new Timer(4000);//监听时间器 timer.addEventListener(TimerEvent.TIMER,onTimer); timer.start(); } private function onTimer(event:TimerEvent):void { num++; num= (num >2 ? 0 :num); accordion.selectedIndex=num; } private function LinkURL(event:MouseEvent):void { Alert.show("点击了"); } ]]--> </mx:Script> <mx:Style> .accordionStyle { font-size:12px;/*设置字体大小*/ text-align:center;/*设置字体对齐方式*/ } </mx:Style> <mx:Accordion id="accordion" headerHeight="25" headerStyleName="accordionStyle" x="0" y="0" width="227" height="158" textAlign="center"> <mx:Canvas label="版权保护" width="100%" height="78"> <mx:Image source="@Embed(source='image/1.jpg')" width="100%" height="78" click="LinkURL(event)"/> </mx:Canvas> <mx:Canvas label="扫黄打非" width="100%" height="100%"> <mx:Image source="@Embed(source='image/2.jpg')" width="100%" height="78" click="LinkURL(event)"/> </mx:Canvas> <mx:Canvas label="农家书屋" width="100%" height="100%"> <mx:Image source="@Embed(source='image/3.jpg')" width="100%" height="78" click="LinkURL(event)"/> </mx:Canvas> </mx:Accordion> </mx:Application>