Carousel Component组件是一个3D的滚动组件,组件继承自ViewStack,可以水平或者垂直展示。下面就举个简单的例子,步骤如下:
1.导入papervision_phunky.swc和tweener.swc。其中第一个包主要是3D效果,第二个是倒影滤镜效果。
2.准备好几个要展示的图片。
3.引入xmlns:containers="com.dougmccune.containers.*"命名空间。
4.写上以下代码,整个例子的源代码在附件中。
.<mx:VBox id="box" verticalGap="0" height="100%" width="100%" maxWidth="600" maxHeight="400" > 2. 3. <containers:CoverFlowContainer id="coverflow" width="100%" height="100%" 4. horizontalGap="40" borderStyle="inset" backgroundColor="0x000000" 5. segments="6" reflectionEnabled="true"> 6. 7. <mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1"> 8. <mx:Image source="images/1.png" /> 9. </mx:HBox> 10. <mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1"> 11. <mx:Image source="images/2.png" toolTip="图片1" /> 12. </mx:HBox> 13. <mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1"> 14. <mx:Image source="images/3.png" toolTip="图片2" /> 15. </mx:HBox> 16. <mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1"> 17. <mx:Image source="images/4.png" toolTip="图片3"/> 18. </mx:HBox> 19. <mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1"> 20. <mx:Image source="images/5.png" toolTip="图片4" /> 21. </mx:HBox> 22. <mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1"> 23. <mx:Image source="images/6.png" toolTip="图片5" /> 24. </mx:HBox> 25. <mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1"> 26. <mx:Image source="images/7.png" toolTip="图片6" /> 27. </mx:HBox> 28. </containers:CoverFlowContainer> 29. <mx:HScrollBar id="scrollbar" width="100%" pageSize="1" maxScrollPosition="{coverflow.numChildren - 1}" 30. scrollPosition="{coverflow.selectedIndex}" 31. scroll="coverflow.selectedIndex = Math.round(scrollbar.scrollPosition)" /> 32. </mx:VBox>
效果如下:
垂直效果
滚动效果