上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




以前から気になっていたCoverFlow ライブラリを使ってみました。



CoverFlow


内容はCoverFlowを行うためのライブラリとなっています。
種類としては以下の4種類があり、今回はCoverFlowContainerを使用しています。
・CarouselContainer
・CoverFlowContainer
・VCoverFlowContainer
・VistaFlowContainer

以下のサイトからDL出来ます。
http://dougmccune.com/blog/2007/11/19/flex-coverflow-performance-improvement-flex-carousel-component-and-vertical-coverflow/

Main.mxml



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:coverflow="com.dougmccune.coverflow.*"
xmlns:containers="com.dougmccune.containers.*"
layout="vertical" horizontalAlign="center" verticalAlign="middle">
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;

[Bindable]
public var imgArray:Array = new Array(
"./flex_img1.jpg",
"./flex_img2.jpg",
"./flex_img3.jpg",
"./flex_img4.jpg",
"./flex_img5.jpg"
);

public function onImageClick(event:Event):void{
detailImg.source = imgArray[coverflow.selectedIndex];
}
]]>
</mx:Script>

<mx:Style source="./shadow.css" />

<mx:VBox>
<!-- 画像詳細 -->
<mx:Image id="detailImg" width="300" height="300" />
<!-- CoverFlow -->
<mx:VBox id="box" verticalGap="0" height="100%" width="100%" >
<containers:CoverFlowContainer id="coverflow" width="100%" height="100%"
horizontalGap="50" borderStyle="none" backgroundColor="0x000000"
segments="6" reflectionEnabled="true" click="{onImageClick(event)}">
<mx:Repeater id="imgRepeater" dataProvider="{imgArray}">
<mx:Canvas width="150" height="150">
<mx:Image id="img" source="{imgRepeater.currentItem}"
width="100%" height="100%" horizontalAlign="center" verticalAlign="middle"/>
</mx:Canvas>
</mx:Repeater>
</containers:CoverFlowContainer>

<mx:HScrollBar id="scrollbar" width="100%" pageSize="1" maxScrollPosition="{coverflow.numChildren - 1}"
scrollPosition="{coverflow.selectedIndex}"
scroll="coverflow.selectedIndex = Math.round(scrollbar.scrollPosition)" />
</mx:VBox>
</mx:VBox>

</mx:Application>


CoverFlowContainer


CoverFlowContainerタグ内でContainer(Panel、Canvas、TitleWindow)を
使用するのみで簡単に使えます。

実行結果は以下のようになります


※ 実行結果はスタイルシートを適用させています。
以下のサイトにある「Shadow」のThemeを使用しています。
http://www.scalenine.com/ 少しでも参考になれば応援お願いします。












上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。